Help! My Captivate Playbar and Closed Captions Disappear in Chrome on Big Monitors!

How to Fix Adobe Captivate’s Disappearing Playbar or Disappearing Closed Captions when in Chrome

TLDR: See the problem and solution below.

Problem: Overlayed Captivate playbars and closed captions disappear in the Chrome browser sometimes. This affects versions of Captivate that publish scalable HTML5 content (it has an unknown impact on other webkit browsers).

Solution:
Use these steps so your closed captions and overlaying your playbar works correctly; otherwise simply uncheck Playbar Overlay in the Skin Editor.

1. In your published project’s unzipped folder, open index_scorm.html (or index.html if not SCORM) in a text (Notepad) or web (Dreamweaver) editor.
2. Just before the </STYLE> tag, type the following:

   #playbar, #ccText {-webkit-backface-visibility: hidden;}

   

   Click the image to enlarge it. You can use 1 or 2 lines for your code – it doesn’t matter!

3. Save the index file and close/reopen the file in Chrome.

Let me know if this helps! I like feedback 🙂

---

The Long Story

My Captivate 2019 project – a newly scalable, 1280 x 720, HTML5, SCORM 1.2, 60MB beast – worked perfectly! Uploaded to the LMS flawlessly! Played in IE! Played in FireFox! Played in Chrome! SVGs worked! Life was good.

Then, I tested it in a maximized Chrome browser on my 28″ monitor. The monitor has a max res of 3840 x 2160, but it was only set to 1920 x 1080. And then… alas.

My overlayed playbar just disappeared! Vanished! Both in the LMS and locally, they were gone on my big screen. I could hover over where the playbar should have been, and the tool tips would appear… there just weren’t any buttons to go with them! I didn’t notice at first, but my closed captions were also gone, too.

I enlisted my husband, who opened the inspection panel in Chrome (press F12 to toggle the inspector open/closed) to inspect the playbar element. When the panel opened, suddenly the playbar reappeared! When we closed the panel, the WBT got bigger, and the playbar and CC reappeared.

We learned that the playbar would disappear at any width wider than 1357px. By opening the inspector panel, the available space shrunk to under 1358px, so it “magically” appeared again. After further inspection, we were able to trace it to a CSS issue. Since it was only Chrome and only , I realized that this wasn’t a Captivate search, but a search in the web dev world. The first search on the list is the one that got me to where I needed to be.

Fixes:

I warned you this would be long!

At the top of the page is my recommended fix for the majority of users. It’s easy, and it’s precise. I wound up going with a different-but-similar solution in using a style on all div elements. The reason that I don’t recommend this option to most people is because divs are everywhere and apply to everything. I’m taking a risk that this stylesheet rule is benign enough not to wreak havoc on things. If you can shed more light on this, please let me know!

I wound up being able to fix this in the <style> tag of the index.html file.

Things I tried:

Option: Add code to your index.html file or index_scorm.html

(Note: this is the same as the TLDR at the top of the post).
This prevents both the playbar and the closed captions from disappearing, by adding a new css style for browsers that use the webkit calls (I added an FYI list of css support for many browsers at the bottom of this page). I found the div id for closed captions and added it to my code below, but it made me nervous that there may be some other object to which this could happen.

1. Publish and unzip your project
2. In your published project’s unzipped folder, open index_scorm.html or index.html in a text editor (Notepad) or web editor (Dreamweaver).
3. Just before the </STYLE> tag, type the following:

   #playbar, #ccText {-webkit-backface-visibility: hidden;}

4. Save the index file and then close/reopen the file in Chrome. If it doesn’t look like it’s working, make sure you’ve closed and opened the file before checking it out. A basic refresh (F5) will not update the file.

Option: In Skin Editor, uncheck Playbar Overlay. (option does not fix closed captions!)

This was the quickest solution, and it worked… but only for the playbar. It did not fix the closed captions. I also did not want the extra 36px of height at the bottom. If you are out of time, don’t use closed captioning, and can afford the extra space for the playbar, this will work for you. I was not thrilled with this answer, but I would have used this in a pinch.

Option: Add code to your index.html file or index_scorm.html

I used this option to get my playbar and closed captioning to appear in Chrome. This is almost the same as the last option, but changing div elements affect way more things. It worked 100% for me, and I think it could account for other unknown objects to which this same fix may be needed. HOWEVER, without knowing how you are uploading your file to the cloud, I cannot in good conscience recommend this for the masses. If you know your environment well, you can decide if you like this option.

1. 1. In your published project’s unzipped folder, open index_scorm.html in a text (Notepad) or web (Dreamweaver) editor.
   2. Just before the </STYLE> tag, type the following:

      div {-webkit-backface-visibility: hidden;}

   3. Save the index file and refresh/reopen the file in Chrome.

Option: Turn off HTML Scalability

Sure, this works, but I lose the ability to resize my web-based training training this way. I worked so hard to make things scalable! What’s the point of switching to SVG images if I can’t scale up? It’s painful to watch a tiny version of my training on my 28″ monitor, only to have the same training be slightly too large for my laptop. I don’t have time to change my resolution, so why would I expect this to be an answer to my users?

So, I do not recommend this… for my situation. If you use a lot of .jpg files that do not look nice at full-screen anyways, making not scalable could be the best answer for you, for now. After all, this set of problems didn’t start until I flipped the scalability switch!

Other things I tried that didn’t really work at all:

• Resize your project larger. I can’t recommend this. Resizing is a pain (always backup!), and the playbar became too small to use. It also didn’t completely rid me of the problem.
• Make the Playbar two rows. This did not work at all. It was not a fix.
• Set the playbar’s alpha to 100%. This did not work at all. It was not a fix.

Special thanks to Dmitri Semenov, who posted:

http://help.dimsemenov.com/discussions/problems/858-weird-bug-in-chrome. I was able to take his solution for a similar issue and, with my husband’s expert help, to modify it for the Captivate playbar. I did not use -webkit-transform: translateZ(0); because it caused issues with my Captivate VR projects. Many, many thanks, Dmitri!

Nerd Stuff (Extra details provided by my husband. Thanks, Scott!):

Once the Chrome window’s display width gets to double the transform: matrix scaleY (last) value, the object flips backwards, making it invisible (see https://css-tricks.com/almanac/properties/b/backface-visibility/). The solution is preventing it from doing so by using -webkit-backface-visibility: hidden;.

FYI: Browser CSS Support:

Firefox and other Mozilla browsers (IceWeasel, etc) use Gecko. Internet Explorer uses Trident. Safari, Google Chrome and Konqueror use Webkit. Opera 9+ uses Presto. (https://stackoverflow.com/questions/1306269/webkit-css-support-which-browsers)

—

Which solution worked for you? Do you have a solution to add? Feel free to comment!