Custom slideshow CSS in Firefox not drawing correctly

1 reply [Last post]
Last seen: 8 years 19 weeks ago
Joined: 2013-08-20

Just completed the Advanced Drupal course, and was building my first site with the new knowledge. (Great course, you rock Chris!)

I've run into a very peculiar problem when adjusting slideshow buttons as shown toward the end of the course. (Second to last chapter)

So here's the rundown:

  • In a local environment, it works. On the remote host it does not.
  • It works fine in Chrome and IE, but not Firefox.
  • In Firefox, if you zoom in/out then back, it will "fix it" and it correctly displays.
  • If you toggle CSS values (in FireBug or other inspection) off then on that effect the broken elements, then they will then display correctly.
  • If you are logged in to the Drupal site, it will display correctly. (Admin menu or something triggers a redraw is my guess)

So basically anything that causes the page to "redraw" will fix the broken elements. When it's broken they display very misplaced on the page, other than that they look/act/work as normal, just their location is broken (horribly so). I don't know why it's broken in the first place, which is the real problem, and I am wondering if any of you have some insight.

However if there's a workaround to get the page to redraw when it loads, I will definitely try that as well.

Useful information: I've verified through other visitors it is not just me, anyone with Firefox has the same issue. The site is hosted through GoDaddy, so not sure if there's something they do that could cause this. Also I have validated and removed any errors and warnings in the CSS with the W3C CSS Validation tool as well. I tried this:
by adding a custom.js to the theme info, but none of the answers seemed to work either.

Pretty desperate and any help will be greatly appreciated!

Last seen: 8 years 19 weeks ago
Joined: 2013-08-20
More info/temporary solution

So any elements that change on the page will cause it to redraw, and "fix" it until the next page load/refresh. So for instance, changing the font face I noticed triggered a page-wide redraw. So I tried this temporary workaround below, which tricks the browser into thinking there's been a font change and it needs to redraw. It mostly works, triggering a redraw without visually changing anything. Only caveat is that the page will still be broken until a cursor enters the page for the first time:

At the beginning of the CSS file:

body {
font-family:Not a real font, sans-serif;

At the end of the CSS file:

font-family:sans-serif !important;

Still would like any ideas/thoughts on how this is breaking in the first place, as it still looks pretty unprofessional if the mouse is outside the browser window when the page loads! (Also I'm sure this isn't optimal performance to trigger a redraw every time the mouse enters and exits the window...)

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:

Contact us

Below are the supported keyboard shortcuts for our video player.

Start / stop video
Go to next video
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
Jump to a percentage (2 is 20%, for example)
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
1 month
6 months
10% off
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.