Element is moving while the page is loading - CSS issue? - html

This is my site.
I have a problem with the site logo - only in Chrome and Opera, it just moves a little while loading (from left to right) and then jumps back to its place.
I had an issue with Chrome and Opera back in the day with my logo, but I fixed it by adding this code:
#nav-header.nav-container {
margin-left: 165px;
}
(without this code, my navigation overlays logo - of course only in Chrome and Opera).
To notice the issue, you have to refresh the page a couple of times (by clicking on site logo).
I tried adding various css but no luck. What can be responsible for this behavior? It's really odd that it only happens in Chrome and Opera.
Any ideas?
EDIT:
This is the code for site logo:
.site-title a img{
height:40px !important;
position:absolute;
pointer-events:auto !important;
top:-27px;
padding-right:10px;
padding-bottom:5px !important;
padding-top:5px !important;
}

Related

Why is Safari messing with the heights of my div?

I just completed a challenge for FrontEnd Mentor and was texting a friend my demo link to show off/celebrate. But when I went to open the link on my phone I noticed the formatting was all messed up. I've since opened the site on Safari, and the height of the div.selected-plan is getting all messed up.
This is what it looks like on my machine with Chrome.
And the distorted Safari version.
Link to the live site so you can view the html/css.
Why is Safari distorting things and how do I prevent it from happening in the future?
Give below CSS to your SVG I think It Creates height
.music-icon {
margin: 1em;
padding: .25em;
max-width: 48px;
max-height: 48px;
}

Transparent background becomes white on image resize

I have an HTML page where I need to render 3 images, one on top of each other.
<div id="preview">
<img src="transparent-image">
</div>
with the following CSS
#preview{
background-image:url(layer0-image), url(layer1-image);
background-size:100%, 100px;
background-blend-mode: multiply;
width: 820px;
height: 350px;
}
The fist 2 images gets blended together using the CSS property background-blend-mode: multiply, on top of this I put the last image (transparent-image) with a transparent background (Imagine a photo of a room, with the wall area being transparent).
The result is exactly what I want but when I try to put
#preview{
width:100%
}
to make it responsive; It works flawlessly, but on ios the transparency is lost.
I tested this behaviour on Chrome, Safari and Firefox (iOS). No problem at all on Chrome, Safari, Firefox on OSX, Android, Windows.
Is there something I'm missing? Thanks for your time.
EDIT:
layer0-image and transparent-image are the same image, layer0-image has no transparency and gets multiplied with layer1-image then on top of this blended image I put transparent-image.
I tried to change transparent-image with another one, the problem seems to be the blending between layer0-image and layer1-image, but due to the fact that layer0-image and transparent-image are the same, at first I thought there was a transparency problem.
The transparency is there, but the div #preview has 0px height when put to
#preview{
width:100%;
height:auto;
}
Showing no blending.
EDIT2:
I'm adding an example to show and replicate the error: https://jsfiddle.net/dyqnghdo/3/
Ok, I finally found the problem. Having:
#preview{
background-image:url(layer0-image), url(layer1-image);
background-size:100%, 100px;
background-blend-mode: multiply;
width: 820px;
height: 350px;
}
and then setting:
#preview{
width:100%;
}
casused the error. To fix it I tried setting:
#preview{
width:100%;
background-size:cover, 100px;
}
The problem is gone even if it's not clear to me why it was happening.

iPhone browser not showing CSS sprite

Could anyone tell me why desktop browsers (Chrome, Safari, Firefox) are showing a CSS background sprite image and the iPhone browser is not?
I have the issue with the social sharing buttons. The first 4 sharing buttons come from the WordPress theme, and the email button was added by me.
The email button is shown on desktop, but not on mobile and I'm not getting why?
I appreciate your help.
Was a problem with selecting classes correctly. Selecting the parent and than the child solved the problem
.parentclass .child {background-size:...;}
.td-sp-share-email is being called for your special email and WhatsApp icons:
ln33:
.td-sp-share-email {
width: 31px;
height: 31px;
background: url("/wp-content/uploads/social-sprites.png") 0px 0px !important;
}
However, you have a rule in style.css?b9d887 that is still setting the background-size property, to 91px 2230px !important:
ln10516:
.td-sp {
background-size: 91px 2230px !important;
}
Your image, social-sprites.png, is only 38px by 76px. Your background-size is the problem.
Update your background-size to what's appropriate and it will work.

Dreamweaver different display than Firefox

I set up a simple example website to show you the issue that I'm currently fighting with:
http://examplesite.ohost.de/
In Firefox the site is rendering just fine, in the Dreamweaver, on my android phone and I think on other webkit browsers, the navigation bar buttons are cut off on the right and I think the buttons have slightly more width.
Here are some screenshots:
So what do I have to change to get a similar result to the one in Firefox in every browser?
edit:
I now tested it on the newest versions of Safari, Opera and Chrome and they are rendering it correctly.
You could use a fix size for navBtn, something like
.navBtn {
position: relative;
float: left;
line-height: 18px;
font-weight: bolder;
list-style: none outside none;
width: 100px;
}
This maintains element size.

Html/css nav bar appears over fullscreen videojs in browser

I have searched everywhere but can't seem to find an answer to this. When playing videos in fullscreen the html navigation sits over the video in IE, Chrome and Firefox but not in Safari from both a Mac and a PC.
The site is http://www.david-bartlett.com Please look at the showreel page or the excerpts.
I'm a relative newbie I'm afraid, is this a css thing or a videojs issue ? Any ideas about how to fix it would be gratefully received.
Cheers.
The problem is the z-index property in DB.css line 80:
#nav li {
margin:0;
padding:0;
position:relative;
float: left;
list-style:none;
line-height: 30px;
z-index:3000; /* this line causes the bug */
}
I'm not sure about other browsers, but in Firefox, it's ok to simply remove that line.