Home>Support>SiteOrigin PageBuilder Weird Vertical Characters Seen on iPad

SiteOrigin PageBuilder Weird Vertical Characters Seen on iPad

By Rick Buser, 9 years ago. Last reply by Support Assistants, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Site: http://dev.cryderpoint.com

 

I’m using the lite/free version of the “Evolve” theme (https://theme4press.com/evolve-multipurpose-wordpress-theme/)

I’m also using the latest version of WordPress and the lastest versions of Site Origin plugins:

Page Builder by Site Origin
Site Origin Widgets Bundle
Redux Framework

How to see the problem: You must view this on an iPad to see what I’m talking about. This does not show up on a desktop browser** (**Since I originally wrote this, I can detect this character on the Safari browser on a Macbook Pro.  No other Mac browsers such as Chrome or Firefox display the character, but Safari does.)

I’ve made a zoomed-in image that’s much larger than normal view, of course, but it does show the characters I’m referring to better: https://i.imgsafe.org/e927901.png

Problem itself: What I’m seeing is that on the lower-left of any SiteOrigin widget, there’s a weird white vertical bar that has some fuzzy gray around it. This only happens on SiteOrigin widgets, and only on the iPad.

I’ve disabled all of my plugins (other than SiteOrigin) and cleared caching, and there’s no change. These characters still show up whenever I have SiteOrigin widgets on a page. I’ve tried on two different iPad browsers (Safari and Chrome)

When I disable the SiteOrigin plugin, the characters disappear on the iPad. Of course, I lose my columns when I do this, but it is a proof of concept.

Look at the homepage on an iPad (dev.cryderpoint.com). The first SiteOrigin row/widget is the one where the left column says “Cryder Point is located on the waterfront in the historic… ” At the bottom of that column is where you’ll find the first weird character where it says “Q15/Q15A local bus.” The character is right on the “u” in “bus.” You may have to pinch/zoom in on that to see it better.

You’ll see the rest of the characters in the row/widgets below, always in the lower left in a few pixels from the edge.

 

Edit: I’ve noticed this odd character also appears on a Macbook Pro, but only when using the Safari browser.  If I use Chrome or Firefox on a Macbook, no issues.  So to summarize, this character shows up on any/all iPad browsers, and also the Safari browser on a Macbook Pro.

 

 

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 6 months ago Support Assistants

    Hi Rick

    Thanks for your question.

    If we aren’t able to help, this is perhaps something you can ask theme support to assist with. The element you’re seeing is most likely related to theme level styling that’s being applied to a SiteOrigin widget.

    At this stage, we’re unable to recreate the problem. We’re guessing, but, you could try adding the following to a Custom CSS plugin like SiteOrigin CSS:

    .entry-content .so-panel img, 
.entry-content .so-panel .wp-caption {
    box-shadow: none;
    border: none;
    background: none;
}
  2. 9 years, 5 months ago Rick Buser

    Hi Guys,

    Thanks for responding. Unfortunately that CSS code didn’t do the trick. But since this anomaly also appeared on a Macbook Pro (Safari only), I was able to use the Safari Developer Tools to methodically go through each line of code in the area where this occurs and started using “display:none” where there was a display option.

    It took a while, but I did find the section in question:

    .panel-grid-cell .so-panel:after {
    content: '';
    display: table;
    clear: both;
}

    I changed “display: table” to “display: none” and it cleared that character everywhere it appeared. Using display:none for this selector combo did not affect anything else, visually.

    What’s interesting to note is that I don’t see this exact block of code on a Windows PC, so it seems to be Safari-specific and/or iOS-specific.

    On the PC (in Chrome), the code block is a bit different:

    .panel-grid:after {
    content: '';
    display: table;
    clear: both;
}

    As you can see, it’s styling .panel-grid and not .panel-grid-cell, and there’s no mention of “.so-panel” in the block. This all seems to be Site Origin styling, so you might want to look into that.

    I’m not going to mark this as “Resolved” to give you a chance to reply first.

  3. 9 years, 5 months ago Rick Buser

    Resolved. See previous post.

  4. 9 years, 5 months ago Support Assistants

    Hi Rick

    I really appreciate all of your efforts on this unusual bug. The CSS rule you’ve highlighted is a standard method to clear floats. Thanks for locating the challenge and finding a fix. If anything else comes up, please, let us know.

    All the best with your site and future projects.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More