Element with fixed position bumps on scroll only in Firefox - javascript

I have a div with fixed position. When I scroll inside a component, I calculate position of another div in order to "stick" the fixed position div to it - so on every scroll position of a fixed element changes.
In chrome everything works correctly but in firefox I have a situation that after every scroll the fixed div "chases" div to its new position.
The strange thing is that when I turn on and off developer tools in firefox, problem disapears.
I don't understand why dev tools helps to workaround this problem and why in chrome it works correctly.
I know that this is a hack and it should be anchored to the div it is 'chasing' but in this case I don't have time to refactor implementation.

Related

Updating scrollLeft / scrollTop not working while scrolling on Safari IOS

In my React application, the user is presented with a horizontally scrollable list and can scroll left / right to load more data.
When the user scrolls all the way to the left, I load more data and append it to the beginning of my list. This works fine, except that the scroll position seems to be reset to 0.
To solve this, I restore the scroll position after prepending the new data to my list. This works well on Android, but on IOS this doesn't work.
On IOS, the scrollLeft position of my DIV is still reset to 0 after rendering, even if I restore the scroll position after rendering. The strange thing seems to be that this only happens if the user was still scrolling when the rendering took place.
So it seems like on IOS Safari, setting the scrollLeft / scrollTop position of a div only works if the user is not currently scrolling that div.
Has anyone seen this before, and perhaps know a workaround?

Will CSS position:fixed block event handling?

Show you code first:
https://codesandbox.io/s/vigorous-fog-te1bw?file=/index.html
Please focus on two points:
full-size-bg is full screen background, it use a fixed div to adjust the alpha instead of set background to parent node because I do not want to modify the real image alpha.
scroll-area is above the full-size-bg and it`s(should be) a scrollable area which height is longer than visible area
Then what I want to know is the fixed background will block the event handling if I do not add position: absolute in scroll-area, the scroll area can not scroll with mouse wheel(but it can scroll if use up and down arrow key, Why?). Of course fiexed will leave document flow for layouting, but also for event handling?
Second, Chrome do not need add the z-index line, but Firefox need, Why??
Third, What I need now is a standard way to set a full screen background with alpha programmatically?
Thanks a lot.
Basically, in your example code, the fixed position does not prevent scrolling. The problem is, when you don't set position: absolute for scroll-area div, the full-size-bg div is HIGHER z-index. You can see that by inspecting in developer tool by right clicking, it will show the top "front" element.
You can find an answer here also: z-index not working with fixed positioning.
For question about firefox vs chrome z-index, you can see more here: z-index behaviour is different in chrome to firefox
For third question, I don't understand correctly :(

Webkit issue - scaling is causing elements on top of a video to disappear

I have a container div, and inside it:
a video element
a red square div on top of the video, in the top-right corner
Demo available here:
https://jsfiddle.net/r5zLyuxh/6/
The container has a transform:Scale(), and overflow:hidden.
When you start increasing the scale, you will notice that somewhere between scale 1.1 - 1.2 - the red box div disappears!
It is still there, but it's moved to be behind the video.
Happens in Chrome & Safari, both on desktop and mobile browser.
Happens only for elements located on the right side of the video.
Increasing the z-index doesn't help. Only when setting the video to be z-index:-1 it will show the red element.
When replacing the video element with a simple div, the issue doesn't happen.
When removing the overflow:hidden, the issue doesn't happen.
Any idea why this is happening?
Due to production limitations, i am looking for a global css/js fix to apply to the container, and not to the children elements.
Thanks!

safari ios div position fixed vanished

i have a modal(position fixed ...) with one input inside it.
every time i start typing something, all of the content just go overlap, like z-index -99999, something like that.
this problem is on safari ios, only.
i tried to force in the main div zindex 9999..., also on the input, but the problem continues.
http://www.e-konomista.pt/artigo/isencao-imi-para-idosos/
the modal is position fixed bottom, if doesnt appear, just refresh.
udealsonline.s3.amazonaws.com/ekonomista/1.png
udealsonline.s3.amazonaws.com/ekonomista/2.png
help guys, and sorry for my english

Javascript appendChild resets scroll of other page elements in IE

I am having trouble with the scroll of divs on pages when viewed in IE, no problem in Chrome or FF
I have a div on a page which has a scroll bar (vertical) and if it has been scrolled down when I use the function appendChild to either the body or any other part of the page the scroll on the other div resets back to the top.
Please can you offer any suggestions why this might happen, perhaps something to do with redraw/reflow but why only IE?
Another thing I have noticed which may be the cause is that it only seems to happen on pages with position fixed on them.
Internet Explorer 9 was finding a dead class reference on an element on my page when rendering. When it did this it was loading each element fresh again in this case without saving how far it was already scrolled down.

Categories