Firefox Mac only: Malformed page content
drutube - October 12, 2007 - 09:29
| Project: | Drupal Administration Menu |
| Version: | 5.x-2.5 |
| Component: | CSS / Browser Support |
| Category: | bug report |
| Priority: | critical |
| Assigned: | Unassigned |
| Status: | active |
Description
I didn't know that this was even possible but for some reason there is a bug that affects only Firefox on Mac. The fieldset legend a fields are all messed up in extremis. This took me about 2 weeks to figure out and it was by accident. I disabled the Admin menu and the fieldsets started to act normally again. It could be a coincidence and I'm investigating further.

#1
Yes this is theme specific. It shows up in my modified zen but not in bluemarine.
#2
I tried this with 5.1 as well and its the same. I can now confirm it is Admin menu as when I enable it the bug returns and disable the bug goes away. I would post screenshots but when I take them the shot looks okay. However the actual screen is really messed up. So that is wierd in itself. I'm using Max ibook intel. Again all is okay on Windows with latest firefox and even Linux is okay.. This is a Mac only issue and way beyond my ability to understand why.
#3
Actually I'm using a Macbook intel 2 ghz core duo with Mac OS X 10.4.10 and Firefox 2 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7)
There really is not a great way to explain this and as I said the screenshots do not actually show the problem This says to me that the screenshot app is not really rendering the final screen output but intercepting it before the display is rendered. It doesnt matter why. But the best I can describe this is that the fieldset legend a is borked on this architecture with this theme. Only I can't find why. I've tried a million things and it just doesn't work. In fact other screens are also messed up with admin menu -- again only on the Mac and FF -- when scrolling with the touchpad the screen becomes smeared and striated.. Its a big mess and the only way to fix is to disable admin menu.
Its a custom theme ordered by the client and just switching themes is not an option. Disabling this module is the only option I can find right now.
If someone would like to verify this or look at it I can provide login info where you can try it both with and without. I can't actually take screenshots.
#4
Actually I don't think I'll need that screenshot. I was looking at the admin menu demo page under the Zen theme. When I went to create a page I got some of the bug. One can still use the edit page here
http://www.unleashedmind.com/drupal/admin_menu/node/add/page
but you can see the smeared lines and striated stuff at the bottom of the page around the edit fields. On my themes its way worse and makes editing impossible. Still you can see it on your own page if you are using the machine and software version I specified above.
#5
If you got to that edit screen I specified above and actually try to add content you will see what I mean. Not only do the display errors appear but you will not be able to find the submit button which is something I forgot to mention. It is the crux of the problem on my themes .... thanks .. sorry to post so many times but finding it on your own page sort of puts the fine point on it and ...I hope it helps.
#6
Sorry, I do not have a Mac. So I'm currently unable to reproduce and debug what you are talking about.
I guess, someone else with a Mac and Firefox at hand has to confirm and debug this.
#7
This is definitely an issue and is specific to the Mac version of Firefox and the Admin menu module. It doesn't just affect fieldsets, etc it also affects video content. If you have any of the flash or video modules enabled the video/flash content in a node will disappear when you scroll down the page (similar to what happens to fieldsets).
I don't have time to debug this for admin menu right now, but will try to look at it soon as I would like to have it enabled for me, but not have it break the website for firefox users on macs.
#8
Better title.
I really hope you guys will find the cause for this bug, since I can not do much here.
#9
This bug has been bugging me for months and my solution had been to avoid zen theme since it is worse in zen, or to do some of my work in safari. I only too just found out it is an admin_menu thing. Before that discovery I just didn't know where to post the bug or how to describe it- I thought it had to do with the jquery fieldsets and wasn't sure if it was connected with the flash content bug or how it was involved with theme....very confusing. I actually had thought it was something specific with my computer since I couldn't find any bugs reported.
Like you were describing it messes up jquery fieldsets as well as flash content.
Finally I'm pleased to say I found the problem: opacity.
In admin_menu.css you need to remove -moz-opacity from #admin_menu li li.
I've found you can also get the same bug if you have opacity anywhere on your page, unrelated to admin_menu. For example after removing admin_menu I still was having a problem with opacity coming from dynamicload (jstools.module). So the bug is really a mac firefox bug. Nonetheless I would propose just removing opacity from the admin_menu, since I don't think the visual effect on windows outweighs the bug on mac.
#10
@Lynn: wow, that's an outdated version of admin_menu you have there. Instead of
-moz-opacitywe're usingopacitynow, which should be supported flawlessly by all non-IE-browsers. Please update your module and perhaps install update_status module to be informed about module updates.#11
Sorry I was out of date and thanks for the update_status tip.
Unfortunately opacity also creates the same bugs in mac firefox (for example, see http://www.hedgerwow.com/360/bugs/opacity-disable-flash-on-mac-firefox.h... )
#12
I don't get the bug anymore with latest versions of admin_menu, Firefox, and Leopard. However I haven't tested with zen theme, which always gave worse problems with opacity. See http://www.civicactions.com/blog/firefox_mac_and_transparency_woes_pulli... for more info about the Mac Firefox opacity bug.
#13
@Lynn: Thank you very much for reporting back!
#14
Hi Sun,
Sorry to do this to you, but I have to take it back already! I usually comment out the opacity part in admin_menu.css and I had uncommented it to test it today after reading the Civicactions post. At first I thought everything looked ok, but now I have found a page that is broken while opacity is on.
The problem is that if a collapsible fieldset is extremely long (my broken page is a workflow_ng page showing a very long list of possible tokens- image attached) then the words in it all start to run together toward the bottom. When I removed the opacity line from admin_menu.css the problem is solved. Another good place to see the bug is the admin/build/modules page if you have a lot of modules in one fieldset.
I know that this is truly a Mac Firefox bug but still think it could be useful to many developers to remove the opacity.
#15
Hmm, ignore my screenshot - while my page looks totally botched the screenshot somehow came out exactly right! I guess I can't give you a real taste for how it looks.
#16
@Lynn: We've recently fixed a bug related to fieldsets on Mac. You might test the current development snapshot or the upcoming release 2.3.
#17
So far so good with 5.x-2.4, sun!
#18
Automatically closed -- issue fixed for two weeks with no activity.
#19
Not to bring back bad news, but there's something funnier going on here that's not just on Mac's Firefox can't handle opacity.
Specifically, we use TinyMCE which sets inactive icons to .3 opacity and it works just fine in OS X FF. When I turn on the admin toolbar, however (tested in both the 5 release and dev branch) the rendering breaks up when the inactive icons of TinyMCE should be viewed. That is, if you're scrolling downward, when you get to the TinyMCE window, the scrollbar on the right of the browser window will scroll normally, but the actual view will not appear like anything's happening. When you scroll enough that the un-opaque icons should NO LONGER be visible, however, the view pops down to the appropriate place on the page and will work normally.
Again, turning off the module fixes that. So it's something definitely going on there.
...Also, any sections that have an "overflow-y" property of "scroll" do scroll correctly if you hover inside them and use the mouse scrollwheel, but inline scrollbars do not render. This also fixes if admin_menu is disabled.
#20
I've experienced malformed page content as well, only further down the page when scrolling, not on fieldset elements in particular. See attached screenshot. This only happens in Firefox on Mac, not in Safari or Opera.
What caused the problem was, as expected, the opacity properties in CSS. More specifically,
filter:Alpha(opacity=88);in#admin-menu li liin admin_menu.css. Once removed, the problem was solved, but the opacity would be gone as well..How about using PNG files with alpha channel transparency as background-image for the second level list items? I'm aware of the lack of alpha channel support in
#21
Sorry, this is for 6.x-1.x-dev.
And the troublesome CSS property was
opacity: 0.88;, not thefilter:one.#22
For admin-menu 5x.2.5 the fix works but you cannot see the drop downs for the actual admin menu. I have to live with it for now. This is on 5.7.
The menu drop downs are not shown on the page.
Chris
#23
Dear Mac friends, =)
#242377: Hide sub-level menu items has been committed recently, which might has an impact on compatibility with Firefox on Mac. So it would be great if someone would download the latest development snapshot and test whether this bug still occurs.
Thanks!