CSS Scrollbars in Safari?

Does anyone know of a way to control the appearance of scrollbars in Safari? So far I've read it's impossible! But I live in hope.
The following CSS code will change the appearance of the scrollbars in IE and Opera, but not in safari..
<style>
BODY {
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
</style>
If there isn't a way - does anyone have an idea of when/if Apple will make Safari comply to this CSS standard? Usually, I don't have this kind of issue with Safari - it's usually IE that's the problem!

Stewy3572 wrote:
If there isn't a way - does anyone have an idea of when/if Apple will make Safari comply to this CSS standard? Usually, I don't have this kind of issue with Safari - it's usually IE that's the problem!
I believe the problem is that these CSS styles are not standard.
There's a bit more from the W3C about deciding not to add it to the CSS3 standards
Though it may make sense to design a styling mechanism to control the presentation of scrollbars, the MSIE scrollbar-*-color properties make too many assumptions about a particular scrollbar appearance design.
The working group considered adding the scrollbar-*-color properties and rejected them quite some time ago.
For CSS3 Basic UI, it is too late to add such a significant new feature. It could be considered for a future version.
According to Microsoft, this CSS is a "Microsoft extension to CSS." That would be why you can get it to work in IE and and not in all other browsers.

Similar Messages

Urgent CSS issue in Safari! LIVE site *****

A site I recently wrapped up was working great in all
browsers, and for some reason I hopped on Safari today and noticed
it's not formatting right at all! I'm not sure where the issue is
as it was hunkey dorey before, and am hoping somebody on here might
know so I can fix it quickly before there are complaints from
people browsing to the site.
http://www.mackinnonicehorse.com
Anybody have any ideas? If you look at it in other browsers
you'll see how the navigation should be, and there are some other
small CSS issues in Safari that I'm seeing. It was working fine
though… ideas? Please help!

Never mind… there was ONE little mistake in my
stylesheet that I fixed and BAM - everything back to normal.
PHEW!!! :)

I am using a multiline textbox and the problem is its not showing vertical scrollbar in safari browser.

I am using a multiline textbox and the problem is its not showing vertical scrollbar in safari browser.

If you are having problems scrolling within a frame then you should be able to use two fingers within the frame to scroll

What version of XHTML and CSS are in Safari 3.2.1

hello
do you know what up to date versions of XHTML and CSS are in Safari 3.2.1
Before i decided to post here i did look at other options, the developers seem to have their own club.
and there was not much other choice on the front page of the forums.
I did try looking through the reference library, http://developer.apple.com/referencelibrary/
where else could i look to find what versions of XHTML and CSS are in Safari 3.2.1
and any other interesting specs.
thank you for your time in this matter.
James

Hi,
When you say you looked through the reference library, did you see [this page|http://developer.apple.com/referencelibrary/InternetWeb/idxWebContent-date .html]?
It doesn't mention explicit version numbers but claims to tell you what functionality is supported.
Safari handles CSS2.1 and a growing number of CSS3 declarations. Work is also ongoing on [adding HTML5 support|http://webkit.org/blog/140/html5-media-support>, but I don't know if any of it has made the release version of Safari yet.

Bizarre CSS error in Safari 5.0.3 & 5.0.4 only on 10.5.8...

Hello,
Using Safari 5.0.3/4 on Mac OS 10.5.8 (does not happen with 5.0.3 on 10.6 or 4.1.8 on 10.4.11)
1) visit this link: https://demodenali.citycarshare.org/reservations/pages/search_results.vms?locati on=&name=&startDate=06%2F20%2F2011&startTime=15%3A30&duration=1&flexible=true
2) wait for the search results to load.
3) in the Pod/Location input field, click on the re-fresh icon.
4) notice how the page layout gets seriously tweeked.
Granted there is a lot of css and js that is building the accordion on the page using jQuery. The result looks fine in the other versions of Safari noted along with all versions of FF, IE7/8.
I've done a fair bit of research and attempted to modify the css and js but with no luck.
Any help or hints would be great. Thanks in advance.

Wow... i did not even see data in the main window upon load..
no idea why it works in one version but not the other, but the page doesn't even come close to validating: http://validator.w3.org/check?uri=https%3A%2F%2Fdemodenali.citycarshare.org%2Fre servations%2Fpages%2Fsearch_results.vms%3Flocation%3D%26name%3D%26startDate%3D06 %252F20%252F2011%26startTime%3D15%253A30%26duration%3D1%26flexible%3Dtrue%23&cha rset=%28detect+automatically%29&doctype=Inline&group=0

Horizontal scrollbar in safari window

After the Yosemite upgrade it is very difficult to scroll horizontally across a webpage in Safari. Usually I have my Safari window seized to fill half my screen (Mac air 13") when writing in another window When I manipulate the size of the window from the bottom corner, a thin gray scrollbar appears, but only for a moment. Because of some motor control problems in my hands, this bar is too thin and disappears too fast for me to easily manipulate it.
Is there a way to make the scroll bar stay longer or is there some keyboard workaround for this function?

Hey luka_stan,
I see that you have some questions about scrolling in OS X. You should be able to use two fingers to scroll horizontally on your trackpad, as described in the article below. It is possible that horizontal scrolling is turned off, but that setting can be adjusted by visiting the trackpad page in System Preferences, as described in this link as well:
Mac notebooks: Two finger trackpad scrolling
http://support.apple.com/kb/ht3448
You can also choose to have the scroll bars you are referencing shown all the time, using the settings described in the following link:
OS X Mountain Lion: Change how scroll bars work
http://support.apple.com/kb/PH10895
Thanks for using the Apple Support Communities!
Cheers,
Braden

Css transitions in safari

I recently added some CSS transistions to my pages that work correctly on I.E., Chrome, Firefox, but tried to open my site on an Apple I-Pad running Safari and they just sit there.
Do I need to alter my code in some way so Safari can handle them ???   Thanks in advance. Pat

As it turns out, we're both wrong, after some extensive testing to prove to myself that I wasn't crazy, I've found the :focus pseudo selector added to a class that is directly styling a <div> doesn't work on Mobile Safari at all (at least in iOS 6.x). Tap all you like on the <div>, it doesn't activate the :focus class.
It works by default in IE, it will not work in FF, Safari, Chrome or Opera without the tabindex attribute added to the <div>.
Javascript is the way to go.
Here's my test page if you don't believe me. I'm sure there is a way to make it work by changing the selectors or where the styles are applied, however I was sticking to the OP site's basic structure by directly styling the <div> tags with the :focus (replacing :hover)...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tabindex Test</title>
<style type="text/css">
.trans {
    display:block;
    width:100px;
    height:20px;
    text-decoration:none;
    overflow:hidden;
    border:1px solid blue;
    cursor:pointer;
    -webkit-transition: all 2s;
    transition: all 2s;
.trans:focus {
    height:100px;
    border:1px solid red;
</style>
</head>
<body>
<div class="trans">doesn't work</div>
<div class="trans">.trans class</div>
<div class="trans">no tabindex</div>
<p> </p>
<div tabindex="1" class="trans"><p>these</p><p>work</p></div>
<div tabindex="2" class="trans"><p>same</p><p>class</p></div>
<div tabindex="3" class="trans"><p>with</p><p>tabindex</p></div>
<p> </p>
<a href="#" class="trans">these</a>
<a href="#" class="trans">work</a>
<a href="#" class="trans">too, but...</a>
</body>
</html>

CSS Issue in Safari

Hello there and hi fellow MAC users, in particular!
I’m saying this because I’m dealing with an issue
that seems to be exclusive to Apple’s Safari browser.
I’m currently working on a site that makes quite some use of
CSS. Unfortunately, the “bodytext” style in the
inner-page won’t display properly in Safari although it
displays fine in IE, Fire Fox, etc.
You can review the page in question at
www.fastventures.com/eco/temp_sec.html
Please help. Any ideas and suggestions would really be
appreciated! Thanks a million!

We figured it out. It was a sloppy line of code in the CSS.
Thanks anyways!

How can I permanently fix the lagging scrollbar in Safari 5.1.2?

I found a temporary fix on this very board, which suggested:
>1) Go to Home>Library>Preferences and delete com.apple.safari.rss.plist and com.apple.safari.plist
>2) Go to Home>Library>Caches and delete the folder labeled com.apple.safari.
>3) Restart your computer.
This is only a temporary fix. It soon goes back to lagging. How is there not a fix yet for this?

I believe the current version of Safari for Snow Leopard is 5.1.4.

CSS problem in Safari 2.0.4

Pages render fine in Firefox, but Safari is trimming is
refusing to render the 100% page height I've set in a div.
Please review the following page in Firefox and Safari to see
what I mean:
http://www.envision-grp.com/staging/frontgate2/index.html
I would appreciate any help on this.

Hi
nothing to worry about imo on a mac - It's just some javascript that creates a dialogue box which doesn't do what it says it will when you click cancel & then opens a page that pretends to find malware on yr computer - all to encourage/force you into downloading a windows application ( exe file) which probably tries to do something nasty..... on a windows computer
I let the thing do it's worst & all that happens is the exe file starts to download... but oSX warns that it's an application & you cancel.... & that's that.
Looks worse than it is - any webpage can create a dialogue box which must be clicked to proceed.
This particular example uses javascript - which can be disabled via Safari-Preferences-Security . I saw the same behaviour in Firefox by the way.

Custom Scrollbars in Firefox using HTML and CSS

With the updated Firefox I can no longer use my custom css scrollbars. Are the completely gone or is there a new way to build them?
::-webkit-scrollbar {
width: 5px;
/* Track */
::-webkit-scrollbar-track {
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);*/
-webkit-border-radius: 0px;
background-color:#fff;
border-radius: 0px;
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background:#fc8a3a;
}

See if this works;
'''[https://addons.mozilla.org/en-US/firefox/addon/noiascrollbars/ NewScrollbars (aka NoiaScrollbars)]''' {web link}
The "NewScrollbars"-extension replaces the default
scrollbars of Firefox and Thunderbird with
colorized ones (partly) known from "Noia themes".

Does Safari support "cover" value of background-size property for CSS?

I'm a web developer. I've run into a Safari issue while coding up a new portfolio site. I was using an older version of Safari that came with my MacBookPro with leopard, where in my css the old Safari was recognizing and properly implementing the value "cover" for the property background-size.
body {
-webkit-background-size: cover;
I recently upgraded to Snow Leopard and I assume my Safari was upgraded too, because now the website I'm building does not look correct in the current version of Safari. Safari is not letting the "cover" value fill the browser window completely as it should. Instead Safari will only allow the image to fill the background so long as the width and heighth values are lower than the actual size of my background image. Once the browser size exceeds either the width or heighth size of my bg image, Safari shows nothing (empty space filled with bg color) beyond the image size. The current version of Safari is 4.0.4.
I want the image to fill the background of the browser window regardless of the browser window resizing in any direction while maintaining the proper aspect ratio, so overflow of image height is generally hidden.
You can see the site I'm building here, mikepriebe.ca. It should look fine in Chrome and Firefox. In Safari you should see what appears to be a large uneven border around the background photo.
Any thoughts or tips on how to fix this or work around this?

Thanks Roger. Although I'll still need to solve the issue for those viewers using the older versions of Safari, even if the property value is executing correctly in the latest version of Safari.

Safari, CSS and form controls

I am searching for a solution to the following CSS issue in Safari. Could someone from Apple verify whether or not Safari in OSX overrides all styles for form controls?
While searching Google for a solution to this issue, all articles or forum entries that I have found indicate that this is true and that it is not possible for the CSS of a site to be used on form controls as the OSX theme overrides styles in Safari.
If this is not true, please direct me to some sort of documentation providing support for a solution. I have an urgent development conflict that needs resolution as soon as possible and would greatly appreciate any assistance. Thank you.

Welcome to Apple Discussions
The forums are a volunteer-based discussion area, so you'll probably not hear directly from Apple. Usually, questions here come from Users and not web developers. You may find a faster answer posting on the WebDeveloper.com forum. Hope this helps you find an answer.
Aloha from Big Island.
iMac G5 Rev C 20" 2.5gb RAM 250 gb HD/iBook G4 1.33 ghz 1.5gb RAM 40 gb HD Mac OS X (10.4.8) LaCie 160gb d2 HD Canon i960 printer

Safari, DIVs over Flash and any dynamic CSS.

Having done my research it appears there is a bug that has been around for a while that remains unfixed. I was hoping the recent update 2.0.1 may have resolved this issue.
This is unique to Safari. While 'Window Mode' and using 'z-index' enables you to overlay a div layer in other browsers, it doesn't fully work in Safari. For sure, the functionality was added, but any dynamic interaction, for example CSS roll-over, makes the background Flash jump to the foreground. Lots of flashing and flickering. Other than that we love Safari, just a shame it has taken so long to fix this since version 1. Any idea when this will be fixed?

I have also had difficulty with flash and CSS layers in Safari. The on(release) action of some buttons in a flash movie I was working on would not function; however, the animated "over" states would function. The site's php/css programmer removed a css layer that was BEHIND the flash file and the functionality of the flash file was restored.
A fix for this type of behavior ( or a work around ) would be helpful.
Safari is a great browser -- an excellent gauge for global accessibility.

Tables too high in safari 3 UPDATE -SOLVED

after I made all the adjustments, everything seems to be
working OK in both IE and Safari 3. Except the tables. They are
always too high.. What can I do, please?
karl,London
Update:
I got a message that it also was too high in Mozilla. I
experimented and came up with such a simple solution, that I am
absolutely astonished that neither of your guys, even the 'experts'
and 'seniors'. who were so fast off the mark to voice their
critique and telll how crappy it all was..
The SIMPLE solution:
the original line I had, for example:
<td bgcolor="#FFFFFF"><p class="normal_text">Any
text</p></td>
SHOULD BE:
<td bgcolor="#FFFFFF" class="normal_text">Any
text</td>
simple, but NONE of your quys, even those who had a look,
could see such a simple error or mine..:-))
Moral of the story: Look and think before your bark...
because you will sure look a proper idiot...
:-) end of problem... rip...
karl,London

SnakEyez02 wrote:
> Malcolm, I have sent the necessary information back to
Karl. In regards to IE
> 6, I didn't figure that out 100% for him with the demo.
In IE 7, Firefox 3,
> and Safari 3 it should work fine. The problem is that in
IE 6 does not
> recognize the third level of CSS which includes the
overflow-x and overflow-y
> attributes. I do believe it can do overflow: auto;
instead of declaring them
> separately as I did. The reason it was that way was
because I found a super
> large image and I didn't want it to scroll left and
right as I knew it would.
> But if the content is going to stick to a specific
width, then the overflow:
> auto should save it. If not an IE 6 hack might be needed
to make it work for
> the older browser.
>
> The following is a really good resource to look at for
browser usage:
>
>
http://www.w3schools.com/browsers/browsers_stats.asp
>
> IE 6 has been on a decline while IE 7 was stagnant but
now appears to finally
> be turning around. If the users of his site do use IE 6,
it might be more
> effective to use a table layout over a CSS layout just
because IE 6 and earlier
> tended to lack the CSS standards whereas Safari, Opera
and Firefox tended to
> use a fairly similar rendering engine and now IE 7 is
catching on to the
> standards.
>
Hey I was following - hope you don't mind a suggestion.
How about a CC such as.....

I know it gives a hor scrollbar but I think it looks better
that way or
at least visually it is more like the rest of the browsers on
XPPro at
least!
Just another opinion :-)
chin chin
Sinclair

CSS Scrollbars in Safari?

Similar Messages

Maybe you are looking for