Scrollbar in iframe disappears when using Chrome on a Mac computer

In my webpage, I have a full-page iframe that behaves strangely in Chrome. The scroll bar appears initially but then disappears, making it invisible even though the space for it is still there. Oddly enough, it works perfectly on Safari and Firefox as well as Chrome on PC, but the issue arises when using Chrome on a Mac - where you can see the scroll bar track, but not the actual bar itself.


        body,html{
            height:100%;
            overflow:hidden;
        }
        #me-branding-bar{
            overflow:hidden;
            width:100%;
            height:40px;
            position:relative;
            background-color:#ff9900;
        }
        #me-content{
            height:100%;
            width:100%;
            position:relative;
            border:1px solid #ff9900;
        }
        #me-content iframe{
            border:1px solid #000;
            overflow:scroll;
        }
    

        <div id="me-branding-bar"></div>

        <div id="me-content">
            <iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="<?php echo $url;?>" style="overflow:visible;height:100%;width:100%;" height="100%" width="100%"></iframe>
        </div>

Check out this JSFiddle link for more information.

htmlcssmacosgoogle-chromeiframe

Answer №1

What causes the disappearance of the scrollbar in an <iframe> while using Chrome on a Mac?

This issue may arise when an <iframe> contains content from an external website, leading to the vanishing of the scrollbar. Let's delve deeper into this matter step by step.

The scenarios mentioned are based on using Chrome on a Mac.

Perform a simple test

To start with, create a basic HTML page, embed it within an <iframe>, and observe it in Chrome on a Mac (DEMO). Upon inspection, you'll notice that the scrollbar remains visible initially, indicating that the problem likely stems from elements on the external site.

Troubleshoot the external site

A peculiar observation is that the scrollbar briefly appears before disappearing, even though the page is still scrollable. Could this behavior be linked to JavaScript? To investigate, try disabling JavaScript and test it out.

After some exploration, it emerges that the scrollbar only disappears when JavaScript executes. This suggests that an element loaded via JavaScript is triggering the issue, with a flash object identified as the culprit during further investigation.

Conduct another experiment

For a clearer comparison, craft two straightforward HTML test pages—one including a flash object and the other without—and place them in separate <iframe>s to spot the discrepancy.

<object type="application/x-shockwave-flash"></object>

Subsequently, it becomes evident that the presence of a flash object leads to the scrollbar being hidden.

Final Thoughts

In essence, the scrollbar doesn't vanish within a standard <iframe> setup unless a flash object is involved. While this might seem like a glitch or deliberate workaround, it underscores the lack of control over external content rendered within <iframe>s.

Despite potential challenges, focus on ensuring that the external content loads properly rather than fixating on minor issues such as scrollbar disappearance—especially since scrolling on Mac devices commonly relies on gestures instead of conventional scrollbars.

If seeking greater control over external content, exploring server-side loading using tools like cURL and content manipulation through HTML parsers could offer more flexibility.

Answer №2

Iframe scrollbars in Chrome on a Mac can be fixed using the code provided below.

This solution works seamlessly across various browsers including Firefox, Safari, and Opera on both Mac and PC platforms.

Link to jsfiddle for reference: jsfiddle

HTML:

<div id="me-branding-bar"></div>

    <div id="me-content">
        <iframe src="http://tsn.ca" height="100%" width="100%" class="iframeclass"></iframe>
    </div>

CSS:

body,html{height:100%;overflow:hidden;}
        #me-branding-bar{overflow:hidden;z-index:102;width:100%;height:40px;position:relative;background-color:#ff9900;}
        #me-content{height:100%;width:100%;position:relative;border:1px solid #ff9900;}
        #me-content iframe{border:1px solid #000;}

.iframeclass::-webkit-scrollbar {
    width:10px;
}

.iframeclass::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.02);
}

.iframeclass::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.3);
}

.iframeclass::-webkit-scrollbar-thumb:hover {
    background:rgba(0,0,0,0.3);
}

.iframeclass::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.3);
}

Answer №3

Try removing all the styles from your HTML code and instead add the attribute scrolling="yes". Check out this example on this link.

<!-- Keep the same HTML code as before, but remove any CSS styles -->

Answer №4

*{
   margin:0; 
   padding:0;
}
html, body{
   height:100%; 
   width:100%;
}
#me-branding-bar{
   width:100%; 
   height:10%; 
   position:relative; 
   background-color:#ff9900; 
   display:block;
}
#me-content{
   display:block; 
   height:90%; 
   width:100%; 
   position:relative; 
   border:none;
}
#me-content iframe{
   border:none; 
   display:block; 
   overflow:auto;
}
::-webkit-scrollbar{-webkit-appearance: scrollbarthumb-vertical;}

Take a look at this helpful resource and also check out this forum thread

Explore this code snippet on jsfiddle

Answer №5

If you're in need of some assistance, I believe this code might do the trick. As a note, I don't have a Mac so please refrain from any negative feedback. The key here is to maintain consistency in both CSS and HTML styles. You'll want to avoid using different styles that may cause issues like in the snippet below:

<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.tsn.ca" style="overflow:visible;height:100%;width:100%;"></iframe>

#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
}

For a clearer view, check out the image in another tab or save it first before viewing.

I've made some modifications to both the CSS and HTML, so please use the updated code:

<style>
*{
    margin:0px;
    padding:0px;
}

body,html{
    height:100%;
    overflow:hidden;
}
#me-branding-bar{
    overflow:hidden;
    width:100%;
    height:40px;
    position:relative;
    background-color:#ff9900;
}
#clearboth {
   clear:both;
}
#me-content{
    height:calc(100% - 40px);
    width:100%;
    position:relative;
    border:1px solid #ff9900;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}
#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
    width:100%;
    height:100%;
}
</style>

And here's the updated HTML structure:

<div id="me-branding-bar">

</div>

<div id="clearboth"></div>

<div id="me-content">
    <iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"
    src="http://www.tsn.ca"></iframe>
</div>

Give it a try and let me know how it goes!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Explore the versatility of jQuery by utilizing multiple objects in your POST and GET requests to PHP for enhanced

I am trying to send multiple arrays to a PHP page using jQuery and retrieve results, but I am encountering an issue where the array values are not being properly passed to the PHP page. Notice: Undefined index: $name Notice: Undefined index: $type Notice ...

phpjqueryhtmlarrays

Deactivate button using Javascript

Can anyone assist me with this issue I am having? I currently have a button set up as follows: <input type="button" id="myButton" name="myButton" value="ClickMe!!" onClick="callMe()"/> I need to disable the button using jQuery, standard javascript ...

javascriptjqueryhtmlcssdojo

Looking for two sliders in a row simultaneously

I currently have between 40 to 50 logos displayed on my website in a slider format, but it takes a lot of time to view the entire slider. Here's a snippet of my code: Below is the code snippet: <script src="https://ajax.googleapis.com/ajax/lib ...

phpjqueryhtml

interactive navigation menu with countdown feature

Looking to create an HTML/jQuery dropdown menu, but encountering a problem. The goal is for the div to slide down when the mouse hovers over the "games" navigation button and only disappear after 5 seconds of the mouse being out, not instantly. Here's ...

javascriptjqueryhtmlmenunavigation

Transforming Form Input Fields into a Nested JSON Format with the Power of JQuery

I'm facing a challenge in converting the input fields below into a nested JSON file structure in my HTML page. Despite trying various methods, I haven't been successful yet. These inputs are retrieved through AngularJS ng-repeat. Any assistance o ...

javascriptjqueryhtmljsonangularjs

What is the best way to vertically center a div that has a fixed position and a specific width in pixels

Is there a way to center a fixed position div with a specified width of 300px, rather than in percentage? <div class="mainCont"> <div class="childCont"> </div> The childCont div has a fixed position and width of 300px. How can I ensur ...

jqueryhtmlcss

CSS transform: applying the same CSS to multiple divs results in a variety of different outcomes

I am working on creating multiple parallelograms with the same skew aligned horizontally. While the first one looks perfect, additional divs seem to increase the skew more and more. I even attempted this using images and applying transform: rotate() but en ...

htmlcss

Footer positioned correctly with relative DIV

I find myself in a state of complete confusion. Coding is not exactly my forte, so I suspect I have made a significant error somewhere that is causing the following issue: My goal is to create a sticky footer. The footer does indeed stick to the bottom of ...

javascriptcsswordpresshtml

Increase and decrease a counter in Javascript by clicking on two separate image tags, with increments and decrements between 1 and 10

Hello! I really appreciate your help. I am currently facing the following issue: <div id="thumb1"> <img class="img-responsive" id="prova" src="img/thumb-up-dark.png" alt=""> <div id="pinline">0</div> ...

javascriptjqueryhtmlcsscounter

displaying a pair of distinct elements using React techniques

I need help adding a react sticky header to my stepper component. When I try to render both components together, I encounter an error. To troubleshoot, I decided to render them separately. Surprisingly, when rendering separately, I do not get the "store is ...

javascripthtmlreactjsreduxmaterial-ui

Utilizing the power of Angular 15 in conjunction with Bootstrap 5's SCSS

After recently updating to Angular 15 with Bootstrap 5, I noticed that none of my utility classes are working (e.g. mb-3, mt-5, etc.) when including bootstrap in my styles.scss as shown below. @import 'bootstrap/scss/bootstrap.scss'; I understan ...

cssangularsassbootstrap-5

Javascript does not execute properly in Google Apps Script

Encountering issues while attempting to execute the code provided in Google app script. // 1.foldername = Folder name | 3.templateId = ID of the template to use // 2.SheetId = ID of spreadsheet to use. | 4.rootFolder = ID of the root fold ...

javascripthtmlgoogle-apps-scriptgoogle-apps

Unusual Behavior of CSS and JQuery Selectors

As I was working with jquery selectors, I encountered something quite unexpected. This is an example of my HTML: <ul id="unordered-list"> <li> <img src="https://www.google.com/images/srpr/logo4w.png" width="40" height="40"/> ...

jquerycssjquery-selectorscss-selectors

Having difficulty configuring particlesJS as the background

If you're looking to create a three-page single scrolling webpage with particlesJS as the background, consider using the following resources: particlesJS Website and particlesJS Github Page. An issue arises when trying to set particlesJS as the back ...

javascriptcsshtmltwitter-bootstrap-3particles.js

The sidebar scrolling feature seems to be malfunctioning, as only the page scrolling functionality is currently

I'm currently working on a webpage that features a sidebar, along with other elements as shown below: https://i.sstatic.net/gf7dX.png In this design, the Your Friends section represents the sidebar. However, I have noticed that when I hover over the ...

htmlcss

What steps can I take to ensure my HTML5 mobile web app is optimized for compatibility across a variety of devices

I recently developed an HTML5 mobile web app and conducted tests on various devices including iPhones, iPads, Android phones, and tablets. What steps can I take to optimize the size and resolution of this app for seamless performance across all these dif ...

htmlhtml5-apps

Tips for preloading cookies prior to the initial request using Python3 and the Selenium Chrome WebDriver

Can cookies be added to a domain, such as stackoverflow.com, in Selenium Chrome WebDriver before making a request to a page on the same domain using get()? When attempting to do so: driver.webdriver.add_cookie({'name' : 'testcookie', & ...

python-3.xseleniumgoogle-chromecookieswebdriver

Is there a glitch or a misinterpretation of the specifications concerning the use of relative padding

VIEW DEMO At times, I like to create a square (or any rectangle) that maintains its ratio regardless of size, using a technique similar to this method. My Objective: To prevent the square from extending beyond the viewport on devices with limited heigh ...

cssviewport-units

Separate the business logic from the HTML code in Angular to prevent repetition and make the code

I have a lengthy HTML code with ngSwitch for 3 cases and 4 small cases within the default case, all using the same icon structure. How can I shorten my HTML code and eliminate business logic from it? The hierarchy to display different icons is: Servicefl ...

htmlangularredundancy

Updating borderWidth dynamically in react native fails to produce the desired effect

Here is the code I am working with: const [focused, setFocused] = useState(false); <TextInput style={{ ...styles.inputStyles, borderColor: `${focused ? colors.darkPurple : "#b8b8b850"}`, borderWidth: `${focused ? 3 : 1}`, }} placeh ...

cssreact-nativebordertextinput