I custom styled the buttons of a Colorbox lightbox on this page (click the image to load).
There are gray buttons (two arrows and an X) that do not appear in Safari (7.0.1) but appear in Chrome and Firefox.
Using web inspector to change the background to a color has no effect either.
CSS of one button:
#cboxNext {
position: fixed;
top: 47%;
right: 18px;
width: 22px;
height: 32px;
background: url("buttons.png");
background-position: -42px 0;
background-repeat: no-repeat;
background-color:white;
}
The .png sprite file and stylesheet are in the same directory.
Updating to the latest Colorbox version didn't help (I reverted back to older version).
I read here that Safari in the past had issue with the background shortcut
syntax, hence the long form.
Any help is much appreciated!
Fixed.
The position:fixed buttons were child elements of a container that had overflow:hidden. Unlike other browsers, Safari seemed to hide the buttons inside their parent.
Related
I have a div, that has full width (100vw) and used a translate in order to place it centered. This is because it’s parent has no full width. If I now add a child with a background image and background-attachment: fixed;, this background image is misplaced in Safari on macOS.
It seems to me that the background image is placed as if the translate on its parent is not active (and thus shows only the right half of the image, since the left part is hidden.
.alignfull {
left: 50%;
max-width: none;
position: relative;
transform: translate(-50%);
width: 100vw;
}
.background {
background: url("https://via.placeholder.com/1800x800") fixed center center / cover;
height: 400px;
width: 100%;
}
<div class="alignfull">
<div class="background">
Test
</div>
</div>
I already tried to change many things but don’t get it working. It seems to be a bug in Safari, but hopefully anyone has an idea how to fix it without waiting for a fix from Apple.
Since the .alignfull is used in rather many places, it’s currently no option to change its CSS.
I am building an in-app walkthrough with Vuetify. And I need to be able to define the position of many dialogs on the same page. I am able to custom position one dialog with this CSS overriding the default:
>>> .v-dialog {
position: absolute !important;
bottom: 0px !important;
right: 45px !important;
}
And I've tried to use custom classes, with the same css, but they won't work. I'm having to redefine the built in class, and so it will end up placing ALL the dialogs in the same spot which isn't what I want.
I have a navbar-toggle menu that, when opened, opens at what looks like 90% width then slides right to fill the screen! I cannot work out what the issue is here: http://www.bootply.com/ZanQBWTECu
Also in desktop view in the same example I have a nav-pills nav-justified menu that, when you hover over a button, increases in height to give the impression of a button moving down however when I click on one of the submenu options it jumps back to its original height.
How do I get the button to remain at the increased width?
remove
.nav {
letter-spacing: 1px;
position: absolute;
top: 0;
left: 0;
z-index: 20;
}
replace with
#rickwoodcollapse {
width:100%;
padding:0;
}
here is a bootply -
Using Sass/Bourbon/Neat, so mind the syntax.
I have a watcher for scroll events that adds a class to an element. I have transitions set to the element to have them ease in nicely.
In Safari, desktop and mobile, it's hit or miss, but it appears to not be rendering the styles when the class changes.
This does not happen on every view and it does not happen consistently. Sometimes it will load, sometimes it won't.
Could it not be related to the transforms at all? Maybe Safari just not paying full attention to the stylesheet all the time?
I have confirmed that the class is being added in safari and this works in all other browsers.
.header-box {
position: fixed;
z-index: 99999999999999999;
top: 0;
left: 0;
width: 100%;
padding-top: 1em;
padding-bottom: 0.3em;
#include transition(All 0.5s ease);
&.nav-scroll {
border-bottom: 2px solid $color__brand-light-grey;
background-color: $color__brand-white;
}
}
There is apparently a bug in safari with having multiple transitions applied to hierarchal elements. So, if the parent had a transition, it wouldn't always render the child transitions.
The solution was to insert a new BG element that was absolutely positioned and fit the width of the parent and apply the transition to it rather than the parent itself.
I would like to make the Jssor Carousel full width, without resizing height at all when the window resizes. So on a wide screen, it would show more slides and on a narrow screen it will show less, without ever changing height. I don't want the slider to resize, I just want it to cut off, if that makes sense.
So far I've got it working as I'd like in Firefox, Chrome, Safari and Opera. If I'm not explaining it very well, I apologize, you can see an example of how I'd like it to work here: http://jessetessman.com/110/slider.php in Firefox, Chrome, Safari or Opera. Note, when you resize the window you have to refresh to resize the slider.
My problem is, it doesn't work in IE. It just has a width of 100px in IE and I have no idea how to get it working.
I appreciate any help you can give. I realize the way I have it now is probably not the best way to go about accomplishing this, but I am not very good with javascript so I just messed with it until I got to this point. Any suggestions about better ways to do this are certainly welcome.
Thank you in advance for the help.
Please add one line $("#news-slider").width("100%");
var jssor_slider1 = new $JssorSlider$("news-slider", options);
$("#news-slider").width("100%");
Forgot to change following css, make the width to greater than screen width then.
#news-slider {
left: 0px; top: 0px; width: 2400px; height: 350px; overflow: hidden; position: relative;
}
#news-slider .slides {
left: 0px; top: 0px; width: 2400px; height: 350px; overflow: hidden; z-index: 0;
}