The logo on my friends website is working properly in all browsers yet when I open up my iPhone or iPad (actual devices) it's all wonky.
<img class="averylogo" src="<?php bloginfo('template_directory') ?>/img/HEADER-AveryLawOffice-LOGO.png" alt="Avery Law Office">
It's not placed in any containing div. Just on it's own.
CSS
.averylogo { position: absolute; width:360px; left: 50%; margin-left: -180px; z-index: 2; }
I'm not quite sure why it works everywhere else but doesn't center on my iPad or iPhone properly.
This is what it's looking like, but only on the iOS.
What am I doing wrong?
Give #main-navigation position:relative; otherwise the logo is positioned relative to the body, which is resized on your smaller device.
Chris Coyier has an article about it.
Use margin-left: auto and remove left: 50%.
You may want to add text-align: center to #main-navigation for IE.
Related
I'm working on a WebRTC UI that shows the user's video in a small element located in front of the video of the person to whom the user is speaking.
Here's a working codepen:
https://codepen.io/VikR/pen/GXoXRp
CSS
#pipContainer {
position: relative;
top: 0;
left: 0;
width: 250px;
}
#otherCallerVideo {
position: relative;
top: 0;
left: 0;
width: 100%;
}
#myVideo {
width: 30%;
position: absolute;
bottom: 0;
right: 0;
transform: rotateY(-180deg);
z-index: 1000;
}
HTML
<p id="status">Loading room information...</p>
<div id="start">
<button onclick="start(event)">Start</button><br/>
</div>
<div id="pipContainer">
<video id="otherCallerVideo" playsInline="true" autoPlay></video>
<video id="myVideo" playsInline="true" autoPlay muted></video>
</div>
This works fine in Chrome and Firefox, but Safari OS X and IOS, don't seem to permit it. The user's video disappears. I've tried a lot of different ways, using z-index and different kinds of positioning, but I haven't yet found a way to get this to work in Safari.
Is it possible to do this in Safari?
I got this working. Here's an updated CodePen.
https://codepen.io/VikR/pen/Wgwwoa
The key was putting this overflow code in the video container:
#pipContainer {
position: relative;
width: 300px;
height: 300px;
border: 5px solid black;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
This was a tough one to track down. Googling "safari z-index video elements" reveals many people having difficulty with this with posts from 2011 to 2018 coming up on the first page of results. Many of the fixes that work in other cases didn't seem to work in this case, possibly because I am overlaying one video element on top of another. The fix that worked was found here.
Note 1: overflow: 'hidden' also works, and has the added benefit of hiding the scrollbars.
Note 2: I have the impression that it may not be possible to change the video dimensions via javascript. In my app I currently set them on the HTML render by reference to screen.height.
I have an iframe inside a popup for some reason in mobile safari once the iframe loads it's changing the size of the iframe to go beyond the screen dimensions and no matter what I do in inspector the computed style won't update.
The style that inspector shows is taking effect is (and works everywhere else including android):
.gc-lightbox > iframe {
background-color: #FFF;
height: 645px;
width: 900px;
position: relative;
border: 4px solid rgba(255, 255, 255, 0.5);
max-height: 90%;
max-width: 90%;
overflow: hidden;
border: none;
}
However, in mobile safari the "computed height" and "computed width" are way off (depending on which popup you initiate) they're up as high as 3000px tall and 700px wide. Inspector does not have the height: 900px or the max-height: 90% crossed out and even if I put style="width: 300px !important; height: 300px !important" directly on the iframe tag the computed values are still going past these values with no indication as to why.
Any clues?
Click on any of the campus tour links (as I said, it works as expected everywhere but mobile safari - even android)
http://www.georgiancollege.ca/new-campus-tours/
In one of my projects, Safari Computed Rules were not matching the Styles Rules. And like, you even adding !important directly to the inline style did not help.
The culprit turned out to be too many transition effects on the page. The transitions were on inputs and textareas (which we manipulated a lot with JS). Changing to this helped me out.
transition: none;
I have two containers which are positioned absolutely one below the other like so:
<header>
<div class="vcenter">
...
</div>
</header>
<div id="wrapper">
...
</div>
CSS:
header {
position: absolute;
top: 0;
height: 70%;
}
.vcenter {
position: relative;
margin-top: -50px;
top: 50%;
}
#wrapper {
position: absolute;
width: 100%;
top: 70%;
}
I'm centering .vcenter vertically with relative positioning. This works fine in all major browsers. Only on IOS Safari on the Ipad it's bugging. Check out the site I'm working on. .vcenter is the container of the logo.
I'm inspecting it through Xcodes IOS-Simulator and also checked on an real Ipad. Is this possibly an IOS Safari Bug? Does somebody have a workaround? I want to keep my header dynamically resizing vertically (height: 70%)...
Thanks in advance for your thoughts.
Desktop Screenshot (how it should be):
IOS-Simulator Ipad Screenshot (how it should't be):
I can't really explain it, but using position: absolute seems to fix your problem:
.vcenter {
position: absolute;
margin-top: -50px;
top: 50%;
width: 100%; /* needed to add to fix horizontal positioning */
}
I think it has something to do with using absolute positioning and percentages on the header. If you inspect the height of the html & body, they aren't actually as tall as your content - so maybe computing a 50% positioning for the vcenter is getting messed up. Not sure...
Have you tried using the transform solution? It generally covers your bases for things like iOS rendering issues (of which there are several more than just this scenario).
Write your class like this (it'll break for IE9 and below, but that's what browser shimming is for and you can use your existing code for the shim using Modernizr)
.vcenter {
position: relative;
top: 50%;
transform: translateY(-50%);
}
That should render .vcenter at the vertical center for all modern browsers as well as iOS Safari.
ULTIMATE GOAL: Make a formed transparency where images can show through but are shaped by the form itself. The images are rollover buttons and turn from grayscale to color with hover
So the picture below (link) shows what I want to happen in Dreamweaver CS6. I used PS to create this image. I simply took the "person portion" and deleted it so the picture turned out as a white box with a transparent inside. My plan was to simply plant this image into DW and then place the rest of the color images beneath it by placement of the IMG tag.
I figured it would turn out like what you see below but it has not. I simply get a full white page (tested offline, not uploaded to the server). If I add a picture, there is no hint that the PNG with the transparency is even existent.
So now, what would be your suggestions? Would it be easier to just use FW and make slices of the work as seen below? In that case I would just have to match all the pieces of the body up like Tetris when working in DW. It just seems there is a MUCH easier way of doing this and somehow I am making it extremely hard.
Please ask if you need further information. Thank you so much.
http://i1195.photobucket.com/albums/aa400/SteffaneTimm/MeFirstSuccess_zps146c6716.jpg
You could save the outline as a .PNG with alpha transparency as you have. To get the seperate images with the rollover effect you could try something like the below. (not using any canvas trickery). Create an image thats double the height of the strip you want, put the black and white version in the top half, and the colour version of the same image in the bottom half.
If you are having difficulty seeing the white outline you could try setting the page background to black temporarily.
To double check you have linked to your image files correctly you could also try pressing f12 in chrome and looking at the Resources tab in Frames > Images.
.container {
width: 500px; height: 800px;
}
.image-strip {
height: 200px; width: 500px; float: left;
overflow: hidden;
}
.image-strip img:hover {
margin-top: -200px;
}
.woman-outline {
position: relative; top: 0px; left: 0px;
height: 800px; width: 500px;
background: url('woman.png') no-repeat;
z-index: 1000;
}
<div id="container">
<div class="image-strip"><img src="1.jpg" /></div>
<div class="image-strip"><img src="2.jpg" /></div>
<div class="image-strip"><img src="3.jpg" /></div>
<div class="image-strip"><img src="4.jpg" /></div>
<div id="woman-outline"></div>
</div>
I think I have a reasonable understanding of how css sprites work, but I am baffled by how JQ Mobile is doing it. As a sample I put together a really basic version:
<style>
#id {
display: block-inline;
width: 16px;
height: 16px;
background-image: url("http://code.jquery.com/mobile/1.0b1/images/icons-18-white.png");
background-position: -576px 50%;
background-color: rgba(0,0,0,0.4);
}
</style>
<div style="border: 1 solid black; padding: 5px">
<span id="id"> </span>
</div>
Which is a stripped down of how jqm is doing it. What I don't get is that if you load that png file into an image editor it is completely white, and I can't see any of the images in there. I am also completely confused as to why the y for background position is 50%.
Can anyone help me understand?
The sprite you're talking about has many white icons on a transparent background. If you use lightweight free tool like IrfanView, you'd see it like this:
background-position: -576px 50%; means the background would be placed at the position of -576 from left and 50% from top, which I think is where the home icon is. Although perhaps the 50% bit won't matter in this case as the height is set to 16px but maybe it matters for some other weird mobile browsers.