This is a bizarre issue I'm having - I have positioned a div absolutely in pixels, and it looks great in Google Chrome while I'm working on the site. However, the div is thrown off in every other window I view it in, including when I open up the site in Google Chrome Incognito mode. I thought it might be an issue with the cache, but this deviation persists even after I emptied it. I'm just completely befuddled. Why does it only look right in that one instance?
This is a screenshot of the two windows placed side by side: http://imgur.com/2UVRSYx (Normal viewing mode on the left, Incognito on the right).
This is the code, it's the most basic it can get:
#magic-book {
position: absolute;
top: 27px;
left: 89px;
}
The site in question is www.charlotteenglish.com/home
In this case the position is fairly important because it affects the legibility of some text. I am using Wordpress, but I disabled the admin toolbar that normally appears at the top of the page. Could it do with me being logged into Wordpress? I can't think of why that'd affect it.
Any guidance would be appreciated, thank you.
EDIT: OK, it's not the div that is different in different windows - it's the entire site. I suppose that changes the question slightly, but the underlying issue still remains. Here's another screenshot to demonstrate: http://imgur.com/8bPyAfE
Actually it is perfect in Chrome. Where is the first issue coming in? Which browser and version? Yup... I viewed in both Normal and Incognito. Should be a cache issue.
Click the Chrome menu on the browser toolbar.
Select Tools.
Select Clear browsing data.
In the dialogue that appears, select the tickboxes for the types of information that you want to remove.
Use the menu at the top to select the amount of data that you want to delete. Select beginning of time to delete everything.
Click Clear browsing data.
Related
Have you seen the smiley jobs guy at the right of the LinkedIn website?
I want him go away!
(https://static-exp1.licdn.com/scds/common/u/images/promo/ads/li_evergreen_jobs_ad_300x250_v1.jpg)
so, I open inspect element on it, add display: none; to its CSS, and there, he's gone...
But when I change pages or refresh it, he comes back, he is very persistent in finding a job for me.
Now, how can I make my browser to remember my appearance preference??
The same goes for the advertisement banners as well,
How can you teach your browser to not show elements again when you made them disappear by inspect element?
Have you seen the smiley jobs guy at the right of the LinkedIn website?
I haven't.
How can you teach your browser to not show buggers again when you made them disappear by inspect element?
Use tampermonkey if you are using chrome or similar software to automate the process of setting display: none on a DOM element. Or more conveniently use some ad-blockers available online.
I'll make this as short as I possible can.
I built a PWA. When clicking on the search icon it will slide to left - no problems.
I'm using a search feature which is containing "input search".
Every browser I have tested, the input group is not causing any issues for me.
When you go on safari on the other hand, you can click on the search icon the first time, and it will then display the search as normal. When you close it, no problems.. But click on it again, then close it again, you'll see that the website/viewport is pushed to the left. Test it on https://logima.io (on safari web browser) just to see the actual problem by hand.
I have tried relative, absolute, fixed and all sorts of box-sizing for different browsers.
I have spent 7 hours debugging the problem, and it definitely comes down to:
<input
ref="search"
id="search"
v-model="search"
#input="makeSearch"
class="search-panel-input"
:placeholder="$t('Type what you are looking for...')"
type="text"
autofocus="true"
>
But, it has nothing to do with the parameters which represents any styling or functions. It has solely to do with "input" itself.
I bought a brand new Macbook Air with 8GB Memory just 3 days ago and developer tools on safari is so slow I can not even use it at all, so I can't quickly debug the problem on developer tools there either which leads me here.
This can possibly be a result of another CSS code i've created causing this to clash. I am trying to figure out a way to make my viewport to not get pushed to left no matter what.
This is not the most critical issue as the search is displayed as I intend it to do on all browsers, on first time usage. But Safari is causing input to push viewport to left on second usage, and that is annoying yet an interesting issue to solve.
I will try myself to debug this styling issue but I'm reaching out here as I am positive there are some web designers more qualified than me to speak on styling in safari.
Any contributions to solving this issue is highly appreciated!
Oddly enough, it seems to be caused by the div(s) in your footer with class row.
So far, I've been able to address the issue by:
Setting margin-left/right to 0px (rather than -15px)
Disabling the values in Dev Tools
Removing the elements entirely from the DOM
(All done before opening the Search Panel)
Unable to fix error Google Mobile Usability > Content wider than screen in Google Search Console. I have try chrome mobile layout emulator from DevTools, set width to 320px but no horizontal scroll appears. So, all looks fine in emulator but google raises error. Then, I have add to css:
#media screen {
html, body {
width: 100%;
overflow-x: hidden;
}...
But no effect, error still persist.
Test Live URL tool don't show any error, all pages mobile friendly.
Any idea how to fix this? I'm sure this is google bug, but how to avoid it?
I have remove all "position: absolute" from classes, doesn't matter if absolute element fits on small screen fine. But that classes were assigned to hidden content what fit fine on smallest smartphone screen, also most of them were not connected to any page element, because elements were password protected.
I found a way to quicker render pages, not waiting long time after clicking "request indexing". First create new page, using site template and css, text on page should be unique(Lorem Ipsum Generator help with that). Second, create one more sitemap file with only one url pointing to new file, submit it and in a 5 minutes you'll have crawled and indexed page. That helps a lot while searching a bug in template or css.
Edit:
Since removing absolute position broke UI design, I set it back with javascript.
Check in real devices instead of emulator. Delete every section and check iteratively, you will understand which one is causing horizontal scroll
I don't know if this is a real issue since I am seeing it mostly when using an emulator, but it seems to be reproducible, and I noticed it on a friend's Android device. URL is:
Link To Page
On some devices, particular iPad Retina emulator, when you click on the hamburger it moves the body of the page to the right as expected, but the side menu area is completely blank, despite the fact that there are elements there and you can click on them, they just are not showing up, so they are being rendered but the whole sidebar is just blank (see picture)
I did discover a useful feature on the developer menu with Safari that I was not aware of. You can go to Develop -> Simulator and use the inspector for the page that is loaded in your simulator. Quite a nice feature, but still not able to quite figure out what the issue is.
It is using a Joomla! template and looking at the source seems like it could use a lot of tweaking because there are a ton of .css and .js resources, some of which probably are not needed and some which probably conflict with one another, some which are not needed on the front end, etc.
Help appreciated.
This kind of a fix:
body.jsn-menu-mobile-push-left {
margin-left: 0px;
}
but not ideal. It shows the menu in this case but it doesn't slide out the body to the right. That is a little strange since when the margin-left is set to 0px it doesn't display.
I am seeing an error which I think is because of z-index, the error is really strange. See these two posts in two different sites (while keeping in mind that the data is same only the sites are having different css)
1st site (buggy one) : http://bloghutsbeta.blogspot.com/2012/03/testing-3.html
2nd site (the okay one) : http://www.bloghuts.com/2011/08/wizard-fashion.html
To see the error please go to first site then click on PLAY and while keeping it open, kindly go to the 2nd on and then click on PLAY you will see the error that I am talking about, I am not able to understand what's going on?
Well I think I found out the issue I am not sure as I used firebug, my friend the problem is because of the values of z-index that you gave to #postarea #sidebar #sidebar1 #sidebar2 etc they have z-index:1 if you turn off them using firebug, it completely resolves the issue you are facing. I think z-index:1 is being considered bigger than z-index:99999999 that's why your content appear above the game and creates issues for you.
I think the issue is not because of z-index as they both are same for both sites, it must be something else that is effecting it. My guess is that the buggy site's design is maybe messing with it as I see contents appearing inside the game and when you click on borders the game disappears.