Background-size: cover/contain broken in latest update
Reported by
jklintes...@gmail.com,
Apr 24 2018
|
|||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36 Steps to reproduce the problem: 1. Use backgound-size: cover or contain on an image. 2. Change the width of the viewport. 3. The image change size dependent on size of viewport (the right size/px are reported in the dev tools though) What is the expected behavior? Expected behavior is the same behavior as before and as in all other browsers: the image retains it size independent of the viewport's size. Or put in another way - the size of the image is shown in the same number of pixels as dev tools is reporting. What went wrong? CSS broke in latest Chrome update. Did this work before? Yes Whichever one was before 66.0.3359.117 Does this work in other browsers? Yes Chrome version: 66.0.3359.117 Channel: stable OS Version: 10.0 Flash Version: This bug makes it very difficult to place overlapping elements. They fit at one viewport width but is displayed wrongly if you change it.
,
Apr 25 2018
Thanks for filing the issue! @Reporter: Could you please provide sample URL/Test file which reproduces the issue, which helps us in further triaging the issue in better way. Thanks!
,
Apr 25 2018
You can see it on all the images that uses cover our contain on this page: https://www.plejmo.com/en/movie/18227/blood-money/ Especially on the stars showing the rating since they are overlapping and for some reason not displayed in the same way/size. (I will however deploy a workaround for the stars asap).
,
Apr 25 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 26 2018
Tested the issue on chrome reported version 66.0.3359.117 using Windows 10 with steps mentioned below: 1) Launched chrome reported version and navigated to URL: https://www.plejmo.com/en/movie/18227/blood-money/ 2) AS mentioned in comment#2, check the behaviour of the stars showing the rating, didn't observed any overlapping of it. Observed: As mentioned in comment#0(Does this work in other browsers? Yes), also check the behaviour of the URL provided in Firefox and Edge, seen the same behaviour as mentioned mentioned above. @Reporter: Please find the attached screencast for your reference and let us know if we missed anything in reproducing the issue, provide your feedback on it which help in further triaging it, if possible could you please provide the screencast of the issue which help us in better understanding it. Thanks!
,
Apr 26 2018
I don't see you resizing the width of the window at any point in the screencast (which was the whole basis of the issue). Mind you that the stars on that page aren't using background position cover our contain anymore, but you can still see the other images change size when you resize the width (!) of the browser window.
,
Apr 26 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 27 2018
Tested the issue on chrome reported version 66.0.3359.117 and latest chrome 68.0.3409.0 using Windows 10 with steps mentioned below: 1) Launched chrome reported version and navigated to URL: https://www.plejmo.com/en/movie/18227/blood-money/ 2) AS per comment#2 & 6, check the behaviour of the stars showing the rating and the images by resizing the width of the chrome browser, didn't observed any change in the size of the images or stars overlapping Observed: Also tested the behaviour of the URL provided in Firefox and Edge, seen the same behaviour as mentioned mentioned above. @Reporter: Please find the attached screencast for your reference and provide your feedback on it which help in further triaging it, if possible could you please provide the screencast of the issue which help us in better understanding it. Thanks!
,
Apr 27 2018
Yes, like I said the stars no longer use background-size contain or cover :D I'm trying to find another webpage where it is used and where the issue is prominent, but it's a big web...
,
Apr 27 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 27 2018
So I just received a new update to Chrome, but same issue. What I did was put background-size: cover back in dev tools so I could show you what I mean. The watchlist icon (not shown if you're not logged in...) uses contain and you can see how it varies in size depending on the viewport width.
,
Apr 30 2018
Able to reproduce the issue on Mac 10.13.3 and Win-10 using chrome reported version #66.0.3359.117 and latest canary #68.0.3415.0. Issue is not seen in OS-linux. This is a non-regression issue as it is observed from M60 old builds. Hence, marking it as untriaged to get more inputs from dev team. Thanks...!!
,
Apr 30 2018
,
May 1 2018
,
May 2 2018
Able to reproduce the issue on Mac 10.13.3, ubuntu 17.10 and Win-10 using chrome latest stable #66.0.3359.139 and latest canary #68.0.3416.0. Observed that the watchlist icon after getting signed in varies in size depending on the viewport width. Attaching M-50 screen cast for reference. Note: The issue is seen from M-50 older builds and we consider a particular issue as non-regression if the issue is observed from M-60. Hence, earlier marked this issue as non-regression. Removing the Needs-Bisect label considering the issue as non-regression. Please feel free to add the same if required. Thanks...!!
,
May 18 2018
Could this issue also be causing the image to not stay put when scrolling in this example? https://jsfiddle.net/sg1gzk3j/
,
May 18 2018
No. Did you comment on the wrong issue? |
|||||||||||
►
Sign in to add a comment |
|||||||||||
Comment 1 by sindhu.chelamcherla@chromium.org
, Apr 24 2018