We're having a strange issue with Google Translate. Normal image tags are fine, but with picture elements with responsive sources the srcset parameters are getting rewritten with a link to Google Translate, which then triggers a 400 error for the image. I've tried adding notranslate classes to the image, the picture element and the div that wraps the image, but with no success. Is there anything else anyone can suggest I can try?
Related
I'm making a website on WP, and I'm using Visual Composer. No blog, just pages. For some reason any images I put on the page skew left. When I load the page, initially the image is in the right place. But then immediately as the page loads they are pushed left. Even if they're inside of a row, as seen here:
The image is inside the same row as the text, yet the text is correctly aligned, and the image is skewed. I put a border around the picture and you can see it even skews from the border.
I'm using the page inspector to try and figure out what in the stylesheet could be causing this, but I've already disabled/changed max-width. The margin-left for some reason says -150 and I can't change it, the inspector keeps saying that even though I've changed to 0 it both on the Stylesheet Editor and in Customize -> Additional CSS.
Any idea what could be causing this?
I have no idea why, but it turns out that the solution was to get rid of the Jetpack plugin. It was causing issues with images and sliders. Everything's back to normal.
There is a gray border showing around the dropdown image, as seen above. That shouldn't be there. I've seen several other questions which state that this is the case because the src of the image cannot be found or loaded. However, that's not the case here. The element contains a src tag which is set to a 16x16 blank GIF.
The file '/images/system/blank.gif' exists, and can be loaded by Safari. Also shows up fine in the Network panel, as 200 - OK.
However, and here is the reason of the bug I guess... In the elements panel the image shows up as:
I can load this image fine in Safari, opening it in a new tab shows as 16x16 GIF... No idea what's going on here.
Just FYI, this is Safari only. Chrome does not show the gray border around the image.
Note: Changing to a transparent PNG image solves the issue, but I'd like to know the underlying cause.
Tracked down the issue to... uBlock!
uBlock decided that an image in the form of /images/system/blank.gif?v=12345 was an ad and decided to cancel the request. The joy.
Using image sprites, not a problem, being doing it for years. But I've just noticed that they have stopped working on chrome when using an "img" tag with a "src" referencing a 1x1px transparent gif (spacer).
I use this spacer/method so that I still have alt text available for screen readers, etc. Just using a div or span tag is not really an option, I need to use the image tag.
Example CSS for the sprite:
.rec_working_backpacker{background: url("../img/recommended/working-sprite.jpg") 0 0; width:100px; height:75px;}
Example implementation of the html:
<img class="rec_working_backpacker" alt="some alt text" src="<?php echo imagePath();?>d.gif"/>
I know this is all working fine (nothing wrong with paths, etc) as it's working on all other browser, but in Chrome nothing is being displayed, it's like it is seeing the 1x1px "d.gif" and using that as the image, but taking the width/height of the sprite from the CSS (using the chrome inspector). Also using the inspector in chrome I can see that it's got the sprite image, it's loaded, it's just being superseded by the 1x1px gif.
Sample live URL: goo.gl/1c9nIF
Top of the RHS column the "print" icon is missing
Just above the google map the "Other interesting pages - what will you look at next" box is full of empty images
Footer is meant to have 4 "follow us" round social icons
etc
Driving me nuts, I've got empty css sprite slots all over my live site... not what I wanted to see on a Saturday morning :-(
Anyone know anything about this? I've checked on three different computers, cleared caches, etc, seems like chrome is broken...
The problem seems to be your image. I'm not sure why, but when I replace your image src with https://pingviin.org/images/flags/blank.gif it works as expected. Maybe whatever you used to create the gif put some strange meta tags on it?
I'm getting a really strange issue when using svg's on my site, see http://i.imgur.com/o4cCF8u.png. The svg that I want displayed is just the arrow icon, but the rest of the characters in the svg set (along with a box for some reason) are also showing up very tiny to the left. Check out the lists on http://camilleblock.com/critter/features/typography/
Has anyone else run into this issue, if so how did you fix it?
I've created a web page, and it has 7 six sections with huge background images using background-size: cover;. It works fine in all browsers except Google Chrome (All versions/All platforms). When I try scrolling the page in google chrome or click on its links (which they also scroll the page using $.scrollTo) the page gets choppy and laggy and it scrolls slowly and uses 100% CPU.
I've uploaded the page so you can test it: http://baaemail.com/beta (I'll remove the page later). Even IE9/10 is fine, but chrome gets choppy.
The page has several "scroll" events bound to it and I have tried disabling the javascript altogether but it doesn't get better so its not from the scroll events.
I'm using background-size: cover because it shapes the photo exactly like I want it to and I want the image to be fixed that's why I can't use other methods like using img tag instead of backgrounds.
What should I do?
thanks.
A solution I found for myself for a website with similar behaviour was to add background-repeat:no-repeat css property for those divs containing huge background images.
You can also check if you have a background image for body or html that is repeated, for me the big problem was a repeated pattern image that interfered considerably with google chrome's scrolling performance.
Also if you're using CSS transitions on those "slides" you should check that those are not assigned to "all". If you're having a transition only for the "left" property there is no point assigning it for "all".
I'm not sure if this alone will help you but it is always a good practice to compress your images and your scripts.
This stuff did the trick for me. Hope it helps.