Different behavior on Firefox and Chrome regarding "overflow:hidden"
-
-
- shenk
- Hero Rocketeer
- Posts: 424
- Thanks: 11
-
See this page:
It was built with Vermillion template, at the bottom its Sprocket-strip located in rt-fullwidth module position. The strange thing is, on firefox, this module doesn't display at all.
I've spent almost a whole Memorial Day trying to figure out what causes the problem, and here I got this Stackoverflow question, but sadly it didn't get much attention.
http://stackoverflow.com/questions/30429212/cross-browser-issue-different-interpretations-regarding-overflowhidden-and
So I think maybe someone here would pay attention to this issue. Actually when we put Strip Modules in the Fullwidth module-position, there are lots of display problems, not only 'cross-browserly'. I've had some experiments, and sometimes in Chrome the module won't display either. But I am too tired to conduct more accurate experiments to indentify the problem, so I just hope someone could look at the SO problem and gave me some documents to read.
Please be noted I'm not simply seeking a solution to the 'firefox-not-displaying-module' problem, there are many workarounds to fix the display problem. For learning purpose, I am just curious what causes the different behaviors of the two major browsers and how we can safely handle it in all occasions. - Last Edit: 8 years 4 months ago by Kat05.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: Different behavior on Firefox and Chrome regarding "overflow:hidden"
Posted 8 years 10 months ago-
You have multiple issues here.
1. your custom CSS doing negative 100% left positioning
2. your strips contents not having images inside for at least the first three items.
3. several markup errors http://validator.w3.org/check?uri=http%3A%2F%2Ffbnychoir.org%2Findex.php%2Fmedias%2Fmedias-1&charset=%28detect+automatically%29&doctype=Inline&group=0
4. you're only using version 1.0 of vermilion - please backup and update.
Regards, Mark. - Last Edit: 8 years 10 months ago by MrT.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- shenk
- Hero Rocketeer
- Posts: 424
- Thanks: 11
Re: Different behavior on Firefox and Chrome regarding "overflow:hidden"
Posted 8 years 10 months ago-
1. that left:-100% is set by me intentionally, it is just for the item title not the entire strip module, so it has nothing to do with the display problem with firefox
2. I am aware of those wrong URL of images, I leave it there for a reason. Again, it has nothing to do with the display problem with firefox. Thank you for pointing out though.
3. Thanks for this resource, I have checked the errors this page mentions, those are rather standard issues, they have nothing to do with the display problem with firefox.
4. I am backing up my site and upgrading the template, I hope it can solve the problem without me having to edit any CSS.
But still, the question remains as I describe in the stackoverflow post : what causes the different interpretation of "overflow:hidden" in the two major browsers? And how does overflow property affect the document flow? I understand this is beyond the concern of RT, but this is a great community so I post this question in this general discussion forum.
PS: I don't know how you managed to take the screenshot, here is what displays in my firefox:This image is hidden for guests.The strip module is not displaying at all.
Please log in or register to see it.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: Different behavior on Firefox and Chrome regarding "overflow:hidden"
Posted 8 years 10 months ago-
Please do the update first. Firefox changed things associated with flex box modal and you need that fix which is contained in the latest template version - then we can look at what is left.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
Re: Different behavior on Firefox and Chrome regarding "overflow:hidden"
Posted 8 years 10 months ago-
... it's really hard to track down ... I think FF is very sensitive with css and html and breaks easily.
You can try to uncomment line 81 in your custom html file and see if that makes a difference
body[class*="menu-medias"] #rt-fullwidth{margin-top:-60px}
(I know it looks like a strange idea ... but try it anyway)
But first ... try what Mark suggested. Also make sure Sprocket is on the latest version too. - Last Edit: 8 years 10 months ago by Henning.
-
-
-
- shenk
- Hero Rocketeer
- Posts: 424
- Thanks: 11
Re: Different behavior on Firefox and Chrome regarding "overflow:hidden"
Posted 8 years 10 months ago-
I am now backing up the site. There are lots of videos files, it takes time. But I'll keep you guys updated once its done.
I know that margin-top property is part of the problem, see the fiddle in my stackoverflow post
As of now, I believe if we can find a general solution to this fiddle, then we can find a solution to the original problem. - Last Edit: 8 years 10 months ago by shenk.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: Different behavior on Firefox and Chrome regarding "overflow:hidden"
Posted 8 years 10 months ago-
I am confident that updating template will have a positive effect on your site. IF you do that first then we can look into the other matters.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- shenk
- Hero Rocketeer
- Posts: 424
- Thanks: 11
Re: Different behavior on Firefox and Chrome regarding "overflow:hidden"
Posted 8 years 10 months ago-
OK. I have upgraded to Vermillion 1.3, while the whole page messes up, which I need some time to sort out, I think the problem remains. Because in chrome and firefox, the view is still different. In chrome's view although it is ugly due to some custom CSS missing, but the module is in its place; However, in firefox, the module is outside mainbody.
And, as before, if you turn off "ul.sprocket-strips-container"'s 'overflow:hidden', the view will be the same as in chrome.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: Different behavior on Firefox and Chrome regarding "overflow:hidden"
Posted 8 years 10 months ago-
Checking your site now that you have upgraded - if I remove all your custom CSS then it works fine. It's your custom CSS causing the remaining issues.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.048 seconds