Issue metadata
Sign in to add a comment
|
Combination of meta viewport, dashed border and border radius causing site to get cropped by about 20%
Reported by
gefer...@googlemail.com,
Nov 9 2016
|
||||||||||||||||||||
Issue descriptionSteps to reproduce the problem: 1. Create at least 2 divs with a dashed border and a border-radius greater than 2px. Fe. 3px border with 10px radius 2. Add meta viewport to the head 3. Watch it in panorama-view on a high resolution tablet What is the expected behavior? Normally you would see 2 divs with a dashed border and rounded corners. Nothing special. What went wrong? The whole site gets cropped on the right side by about 20% with a black area (regardless of the body background color). The dashed border gets distorted. It happens too with portrait-view, but you can't see it that well. Did this work before? Yes Before the latest update Does this work in other browsers? Yes Chrome version: 54.0.2840.68 Channel: stable OS Version: 4.4.2 Flash Version: The problems occurs on my Tablet (Galaxy Tab SM-T525) as well as on my 2 mobile phones (all with android 4.xx). After resetting chrome to default the problem disappeared. After updating to the current version it reappeared. This problem doesn't occur on PC, nor on any other mobile browsers i could test (firefox, built in android browser). Using solid borders (with or without border-radius) is not causing any problems. Using dashed borders without border-radius is not causing any problems as well. Without the meta viewport you can use as many dahsed borders with rounded corners as you like as well. I got a website online with more than 2 dashed borders (and rounded corners) for about 1.5 years and this problem did not occur before the latest update.
,
Nov 9 2016
,
Nov 14 2016
I can see this bug when running in devtools with emulation for a Galaxy S5
,
Nov 15 2016
I'm not able to see this issue with devtools. Some of the text is not visible, but that's because the text color and the background color of body is the same.
,
Nov 15 2016
I don't see the issue on Samsung Galaxy S6 with Chrome 54.0.2840.85.
,
Nov 15 2016
Looks correct with Chrome Dev 56.0.2913.5 (Samsung Galaxy S6) as well.
,
Nov 15 2016
,
Nov 15 2016
I tested it on the following physical devices: Samsung Galaxy S2 - Android 4.1.2; Samsung Galaxy S4 - Android 4.4.2 and Samsung Galaxy Tab 2 Pro - Android 4.4.2 All have the same Version of Chrome (54.0.2840.85). It's happeing on all 3 devices. It can be seen better when rotating the device to panorama-view. It has nothing to do with the background-color. In my example the background-color of the body-element is #ccc and #333 for the wrapping container. The 20% cut-off is just plain black. Plus the distortion of the border is another factor that's happening in this setup, which in my opinion could relate to some kind of rendering error. I don't know if devtools or other devices with a higher version of android are able to reproduce this bug. Maybe it's only happening with Android 4 and the latest version of Chrome, or even maybe only on Samsung devices. Unfortunatelly I can't test it on other Android versions.
,
Nov 16 2016
Testing on a Nexus 5 Android 4.4.4 with Chrome 54.0.2840.68. Still cannot see this issue. I'm testing with the test.html attachment pasted into https://output.jsbin.com/jafeyoseko
,
Nov 18 2016
Thanks to all people who tried to resolve this issue. I had time test some more stuff and created a new test file with a yellow background. I tested it on dev tools with various settings and on my physical devices. After adding box-sizing: border-box the problem was gone on my mobile phones - which i should have done in the original version from start, cause 100% + border is more than a 100%... - unfortunatelly I missed that back then. With this the bug is also gone on my Galaxy Tab Pro 10.1 while viewing the test-file in portrait-view. But in landscape(panorama)-view it still gets cropped. I then again did reset chrome to factory defaults, deinstalling all updates, clearing cache, etc. As in previous tests the bug was gone on the fresh install. After updating chrome to the latest version it appeared again. I added two screenshots to this comment. The first one was taken after resetting chrome, the second after updating chrome to the latest version. This bug is really weird and maybe it's based on the high resolution of this tablet (2560x1600px, 299ppi). Unfortunatelly I got no other high resolution device to test it (maybe to find ot if the android version is causing this). I added the new test-file to this comment as well. I hope that someone might have a clue to this.
,
Nov 19 2016
Wildly guessing somewhere in the graphics pipeline. I'm fairly sure this is not a Blink>CSS issue now.
,
Nov 19 2016
Yeah i agree. It's my first bug report and I got a little confused what component to choose, so I called it css, cause it had clearly to do with the dashed border definition. But I guess it's some kind of rendering error. Does anyone know if this issue will be accounted or not? I already implemented a workaround for the affected site (css hack) but nevertheless I hope this will be fixed some time later.
,
Nov 28 2016
Given that dknox@ has reproduced, I'm going to mark this as Available. I'm guessing that this is *not* GPU-specific, since the S2 and S4 (from comment #9) have wildly different GPUs (Mali vs PowerVR). gefersch@, could you navigate to chrome://gpu on the affected devices, and if possible, attach the contents here?
,
Mar 28 2017
,
Apr 11 2018
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 13 2018
Eric, can you triage this? We'll need someone to test if this still happens.
,
Apr 16 2018
|
|||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||
Comment 1 by gefer...@googlemail.com
, Nov 9 2016