Fixed divs are now positioned only to viewport

27 views
Skip to first unread message

Mike Miller

unread,
May 18, 2017, 12:03:48 PM5/18/17
to Chromium-discuss
Hi, guys!

The few last updates showed a permanent issue with positioning of fixed divs.

I used 3 fixed divs with equal z-index on my website to create a non-scrolling background for each parent div it is located in.

Here's how it looks:

<div class="parent relative">
    <div class="fixed"></div>
</div>

<div class="parent relative">
    <div class="fixed"></div>
</div>

<div class="parent relative">
    <div class="fixed"></div>
</div>

For div class="fixed" I set three backgrounds in "cover" mode without fixed attachment. 

In earlier versions of Chrome as well as in Safari this trick worked excellent in terms of scrolling speed and performance on weak devices. I used it instead of background-attachment:fixed which works very slow and produces choppy scrolling. Because Chrome and Safari positioned this fixed divs not to viewport, but parent divs!!! A perfect solution which didn't work in Firefox and IE. 

But since 57 version of Chrome (I believe) it started to position all of fixed divs to the viewport. When I came once again to my website I realized that all 3 divs are now just fixed to the viewport and hide each other and other content of the website.

Can it somehow be fixed soon? By the way, in Safari it still works perfectly! For Chrome, unfortunately, I had to write a script, which made this divs positioned absolute with background-attachment:fixed. And the performance of my website is now just awful :(

PhistucK

unread,
May 18, 2017, 12:13:05 PM5/18/17
to simplema...@gmail.com, Chromium-discuss
Sorry, but it will be much more helpful if you could share a test case that shows the problem, basically the smallest amount of HTML/CSS/JavaScript/images that is absolutely required to reproduce the issue.


PhistucK

--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss

---
You received this message because you are subscribed to the Google Groups "Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discuss+unsubscribe@chromium.org.

Mike Miller

unread,
May 18, 2017, 1:42:52 PM5/18/17
to Chromium-discuss, simplema...@gmail.com
I guess it will be hard to share a code, but here's a test version of the website which now doesn't work in Chrome but worked perfectly a few months ago.


It was left as it is with this bug. You may check how it looks in the latest chrome and in Safari 10.1. You'll see big difference.
The fixed divs are .offering-bg, .team-bg, .feedback-bg (hidden by default).


четверг, 18 мая 2017 г., 19:13:05 UTC+3 пользователь PhistucK написал:


PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discu...@chromium.org.

PhistucK

unread,
May 19, 2017, 5:38:31 AM5/19/17
to Mike Miller, Chromium-discuss
Looks like the change was introduced between Chrome 54 and Chrome 55.

I looked for related bugs that were closed in that approximate period -
There are a few fixed bugs that relate to cropping, overflow and position: fixed. I suspect your changed behavior has something to do with that combination.

I have not examined your page in detail. It would probably take a while, so I will leave it to the Chrome team, though your help (creating a simple and minimal test project) could significantly shorten the time it take to find the root cause and get it fixed (if it really is a browser bug).

You can search crbug.com for an existing issue and star it. If you cannot find one, file a new issue using the "New issue" link on the same page.
Please, do not add a "+1" or "Me too" or "Confirmed" (or similar) comment. It just wastes the time of Chrome engineers and sends unnecessary e-mails to all of the people who starred the issue.

You can reply with a link to the found or created issue and might get triaged (and fixed) faster.

Thank you.



PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discuss+unsubscribe@chromium.org.

Mike Miller

unread,
May 19, 2017, 7:22:46 AM5/19/17
to Chromium-discuss, simplema...@gmail.com
Thanks for reply! As soon as I'll prepare a test project for this issue, I'll post it right here. 

пятница, 19 мая 2017 г., 12:38:31 UTC+3 пользователь PhistucK написал:


PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discu...@chromium.org.

Torne (Richard Coles)

unread,
May 19, 2017, 7:39:07 AM5/19/17
to simplema...@gmail.com, Chromium-discuss

Please don't post it right here, please file it as a bug in the bug tracker :)

Mike Miller

unread,
May 19, 2017, 2:56:23 PM5/19/17
to Chromium-discuss, simplema...@gmail.com
Done) Hope it will help. Otherwise, I'll have to reinvent all CSS behavior of the website and make it less eye-catching (either by removing all fixed divs with different backgrounds or by making them scroll with the content).

пятница, 19 мая 2017 г., 14:39:07 UTC+3 пользователь Torne (Richard Coles) написал:

PhistucK

unread,
May 19, 2017, 4:20:23 PM5/19/17
to Mike Miller, Chromium-discuss
Please, post a link to the the filed issue.


PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discuss+unsubscribe@chromium.org.

Reply all
Reply to author
Forward
0 new messages