jqm 1.2 create strange lines/borders in Chrome #5191

Closed
tateman66 opened this Issue Oct 17, 2012 · 11 comments

Comments

Projects
None yet
4 participants
@tateman66

I have a modal opening with a form in it and nothing else really special about it. As you click through the form inputs, strange borders and artifacts appear. Clicking around for a second causes them to go away. Repaint events also seem to make them go away as you can't try to see if things have been changed in the inspector as it causes repaints.

http://dl.dropbox.com/u/56467354/jqm-chrome-artifacts.png

@robschmuecker

This comment has been minimized.

Show comment Hide comment
@robschmuecker

robschmuecker Oct 17, 2012

Contributor

Hi @tateman66

Please can you perhaps assist in bugtracking this by putting up a simple test page as mentioned in the issues section of the Contributing Guidelines
Can you also mention which version of Chrome you are using and what OS you are on?

Thanks

Contributor

robschmuecker commented Oct 17, 2012

Hi @tateman66

Please can you perhaps assist in bugtracking this by putting up a simple test page as mentioned in the issues section of the Contributing Guidelines
Can you also mention which version of Chrome you are using and what OS you are on?

Thanks

@jaspermdegroot

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot Oct 17, 2012

Member

I have seen this on Chrome with buttons with box-shadow on hover.

Member

jaspermdegroot commented Oct 17, 2012

I have seen this on Chrome with buttons with box-shadow on hover.

@tateman66

This comment has been minimized.

Show comment Hide comment
@tateman66

tateman66 Oct 17, 2012

Hey Guys. Sorry for not complying with the guidelines. :(

I'm using 22.0.1229.94 m of Chrome and the modal you see in the screenshot has no buttons in it. Though, there are extensive box shadows around which as uGoMobi mentioned can wreak havoc with the UI.

JQM version is 1.2 and JQ 1.82.

I'll get a public site up as fast as I can but in the extreme short term the modal code is attached. Though, I'm sure this is a webkit issue and there's not much that can be done about it anyway except start removing box-shadows/text-shadows, etc where necessary.

<div data-role="popup" id="popupCreateAccount" data-theme="a" class="ui-corner-all" data-position-to="window" data-transition="slideup" data-tolerance="39,0,80,0">
    <div>
        <fieldset id="basicInfo">
            <form>
                <h3 class="ui-li-heading">Create Account</h3>

                <ul class="groupList">
                    <li>
                        <label for="userid">User ID:</label><input type="text" name="userid" id="userid" value=""" data-mini="true" disabled="disabled" data-theme="c" />
                    </li>
                    <li>
                        <label for="accountEmail">Email:</label><input type="text" name="accountEmail" id="accountEmail" value="" data-mini="true" data-theme="c" />
                    </li>
                    <li>
                        <label for="createPW1">Pass1:</label><input type="password" name="createPW1" id="createPW1" data-mini="true" data-theme="c" />
                    </li>
                    <li>
                        <label for="createPW2">Pass2:</label><input type="password" name="createPW2" id="createPW2" data-mini="true" data-theme="c" />
                    </li>
                    <li>
                        <label for="firstName">First Name:</label><input type="text" name="firstName" id="firstName" value="" data-mini="true" data-theme="c" />
                    </li>
                    <li>
                        <label for="lastName">Last Name:</label><input type="text" name="lastName" id="lastName" value="" data-mini="true" data-theme="c" />
                    </li>
                    <li>
                        <label for="gender" class="ui-input-text">Gender:</label>
                        <fieldset data-role="controlgroup" data-type="horizontal">
                            <input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="checked" data-mini="true" data-theme="a" />
                            <label for="radio-choice-21">Male</label>

                            <input type="radio" name="radio-choice-2" id="radio-choice-22" value="choice-2" data-mini="true" data-theme="a" />
                            <label for="radio-choice-22">Female</label>
                        </fieldset>
                    </li>
                    <li>
                        <label for="dob">Birth Date:</label><input type="date" name="dob" id="dob" value="" data-mini="true" data-theme="c" />
                    </li>
                </ul>
                <button type="submit" data-theme="b" data-mini="true">Save</button>
            </form>
        </fieldset>
    </div>
</div>

Hey Guys. Sorry for not complying with the guidelines. :(

I'm using 22.0.1229.94 m of Chrome and the modal you see in the screenshot has no buttons in it. Though, there are extensive box shadows around which as uGoMobi mentioned can wreak havoc with the UI.

JQM version is 1.2 and JQ 1.82.

I'll get a public site up as fast as I can but in the extreme short term the modal code is attached. Though, I'm sure this is a webkit issue and there's not much that can be done about it anyway except start removing box-shadows/text-shadows, etc where necessary.

<div data-role="popup" id="popupCreateAccount" data-theme="a" class="ui-corner-all" data-position-to="window" data-transition="slideup" data-tolerance="39,0,80,0">
    <div>
        <fieldset id="basicInfo">
            <form>
                <h3 class="ui-li-heading">Create Account</h3>

                <ul class="groupList">
                    <li>
                        <label for="userid">User ID:</label><input type="text" name="userid" id="userid" value=""" data-mini="true" disabled="disabled" data-theme="c" />
                    </li>
                    <li>
                        <label for="accountEmail">Email:</label><input type="text" name="accountEmail" id="accountEmail" value="" data-mini="true" data-theme="c" />
                    </li>
                    <li>
                        <label for="createPW1">Pass1:</label><input type="password" name="createPW1" id="createPW1" data-mini="true" data-theme="c" />
                    </li>
                    <li>
                        <label for="createPW2">Pass2:</label><input type="password" name="createPW2" id="createPW2" data-mini="true" data-theme="c" />
                    </li>
                    <li>
                        <label for="firstName">First Name:</label><input type="text" name="firstName" id="firstName" value="" data-mini="true" data-theme="c" />
                    </li>
                    <li>
                        <label for="lastName">Last Name:</label><input type="text" name="lastName" id="lastName" value="" data-mini="true" data-theme="c" />
                    </li>
                    <li>
                        <label for="gender" class="ui-input-text">Gender:</label>
                        <fieldset data-role="controlgroup" data-type="horizontal">
                            <input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="checked" data-mini="true" data-theme="a" />
                            <label for="radio-choice-21">Male</label>

                            <input type="radio" name="radio-choice-2" id="radio-choice-22" value="choice-2" data-mini="true" data-theme="a" />
                            <label for="radio-choice-22">Female</label>
                        </fieldset>
                    </li>
                    <li>
                        <label for="dob">Birth Date:</label><input type="date" name="dob" id="dob" value="" data-mini="true" data-theme="c" />
                    </li>
                </ul>
                <button type="submit" data-theme="b" data-mini="true">Save</button>
            </form>
        </fieldset>
    </div>
</div>
@robschmuecker

This comment has been minimized.

Show comment Hide comment
@robschmuecker

robschmuecker Oct 17, 2012

Contributor

Hey @tateman66 no sweat about the guidelines, it just makes it easier to debug if there's a publicly available JSBin of the issue.
I'm glad @ugomobi has highlighted some of his previous experience with box-shadows as that at least gives some tips as to where to begin! Let us know when you get a chance to get a demonstrable JSBin and I'll happily try and have a hack around and see if I can help.

Thanks.

Contributor

robschmuecker commented Oct 17, 2012

Hey @tateman66 no sweat about the guidelines, it just makes it easier to debug if there's a publicly available JSBin of the issue.
I'm glad @ugomobi has highlighted some of his previous experience with box-shadows as that at least gives some tips as to where to begin! Let us know when you get a chance to get a demonstrable JSBin and I'll happily try and have a hack around and see if I can help.

Thanks.

@tateman66

This comment has been minimized.

Show comment Hide comment
@tateman66

tateman66 Oct 17, 2012

Hey Rob.

Here's a jsBin with the most of the local dependencies removed.

http://jsbin.com/welcome/35720/edit

Set Auto-run JS to off since it will double enhance stuff.

As you can see in Chrome, as you click through the inputs, you get garbage in and around them. Now, with what you're seeing, that's nothing but a small theme created by the themeroller. And, here's the asset if you want to import it and tweak it for any reason.

http://dl.dropbox.com/u/56467354/activetheme.css

Either way, as I said before, I'm sure these are Chrome problems and there's not much we're going to be able to do in the short term.

Hey Rob.

Here's a jsBin with the most of the local dependencies removed.

http://jsbin.com/welcome/35720/edit

Set Auto-run JS to off since it will double enhance stuff.

As you can see in Chrome, as you click through the inputs, you get garbage in and around them. Now, with what you're seeing, that's nothing but a small theme created by the themeroller. And, here's the asset if you want to import it and tweak it for any reason.

http://dl.dropbox.com/u/56467354/activetheme.css

Either way, as I said before, I'm sure these are Chrome problems and there's not much we're going to be able to do in the short term.

@robschmuecker

This comment has been minimized.

Show comment Hide comment
@robschmuecker

robschmuecker Oct 18, 2012

Contributor

Hi @tateman66

I have had a look and certainly see the problem. However even when taking out your custom CSS it is still present. There must be something different / wrong with what's happening there. I haven't figured it out quite yet but as you can see in the docs for the popup, if you look at the form example there no ghosting/artifacts occur on Chrome. There must be some kind of conflict in the code. Could you perhaps show us the raw html before it gets marked up by the framework as it seems you've done a copy of your DOM when it's already been marked up. I think if we strip away (comment out) all the other elements on the page we'll eventually get it working correctly even with your custom theme.

R.

Contributor

robschmuecker commented Oct 18, 2012

Hi @tateman66

I have had a look and certainly see the problem. However even when taking out your custom CSS it is still present. There must be something different / wrong with what's happening there. I haven't figured it out quite yet but as you can see in the docs for the popup, if you look at the form example there no ghosting/artifacts occur on Chrome. There must be some kind of conflict in the code. Could you perhaps show us the raw html before it gets marked up by the framework as it seems you've done a copy of your DOM when it's already been marked up. I think if we strip away (comment out) all the other elements on the page we'll eventually get it working correctly even with your custom theme.

R.

@tateman66

This comment has been minimized.

Show comment Hide comment
@tateman66

tateman66 Oct 18, 2012

Hey Rob.

Thanks again for your help. I wasn't expecting much help since it seems like a webkit issue to me. Anyway, here is the dialog.

That HTML chunk above is the dialog pre-enhancement. You should be able to slap that on any JQM page and link to it. Let me know if you need more.

Hey Rob.

Thanks again for your help. I wasn't expecting much help since it seems like a webkit issue to me. Anyway, here is the dialog.

That HTML chunk above is the dialog pre-enhancement. You should be able to slap that on any JQM page and link to it. Let me know if you need more.

@gabrielschulhof

This comment has been minimized.

Show comment Hide comment
@gabrielschulhof

gabrielschulhof Oct 18, 2012

Contributor

It seems chrome recently has lots of rendering artifacts: #5139

Contributor

gabrielschulhof commented Oct 18, 2012

It seems chrome recently has lots of rendering artifacts: #5139

@robschmuecker

This comment has been minimized.

Show comment Hide comment
@robschmuecker

robschmuecker Oct 19, 2012

Contributor

@tateman66

Thanks for your reply but I see no HTML chuck above?! So yes I will need more :-)

Contributor

robschmuecker commented Oct 19, 2012

@tateman66

Thanks for your reply but I see no HTML chuck above?! So yes I will need more :-)

@tateman66

This comment has been minimized.

Show comment Hide comment
@tateman66

tateman66 Oct 26, 2012

I meant the HTML chunk from way above. 4th post from the top.

I meant the HTML chunk from way above. 4th post from the top.

@jaspermdegroot

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot May 2, 2013

Member

I can't reproduce this issue anymore lately. Besides that it is indeed a Chrome issue which we can't fix. Closing as not a bug at our end.

Member

jaspermdegroot commented May 2, 2013

I can't reproduce this issue anymore lately. Besides that it is indeed a Chrome issue which we can't fix. Closing as not a bug at our end.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment