Freecodecamp: Run Test - Hangs after clicking link in the iphone Preview

[tanveer12332]

Challenge Link to External Pages with Anchor Elements has an issue.
User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.75 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat">
<a href="http://freecatphotoapp.com">cat photos</a>
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

---

Edit by @raisedadead :

Issue Description:

Clicking on the link in the iphone preview area hangs the run test

[ghost]

Your anchor tag has the href attribute of http://freecodecamp.com instead of http://freecodecamp.com. This is only the case in the challenge link at the top.Your code snippet runs fine.

[raisedadead]

@theflametrooper Did you mean :

http://freecatphotoapp.com instead of http://freecodecamp.com

@tanveer12332
Thanks for reporting this. GitHub Issues are for reporting bugs on the website only.
Please consult the Help Chat Room for any assistance to Coding.

Happy Coding!

[tanveer12332]

no i click on href and run button is not working and state is hang so that is i think issue user is waiting to change next step but is not working i am click reset but url link is broken becouse is click href .my english is not good.i think you understand

[raisedadead]

No problems. And Yes I got what you are saying. I'll update the issue description as well.
Thanks @tanveer12332.

[tanveer12332]

welcome

[raisedadead]

@tanveer12332 Dont close this :wink:

[tanveer12332]

ok

[BKinahan]

After a little testing, the bug is not dependent on which URL is used, and does not occur if the link is opened in a new tab / window with a right-click context menu or using target="_blank".

Is this challenge too early to require another attribute like that, or would asking the user to include the target resolve the issue?

Alternatively we could add some script that adds that attribute to any link and not bother the user about it.

[raisedadead]

@BKinahan Thanks for investigating this. I actually like the idea of adding a script to the links that are rendered within the preview.

[CosineroLian]

Hi guys, could anybody help ,me with this issue. I've done all the instruction, but seems i can't move to the next level

[raisedadead]

@CosineroLian GitHub Issues are for reporting bugs on the website only.
Please consult the Help Chat Room for any assistance to Coding.

Happy Coding!

[BKinahan]

@raisedadead Adding the line <script>document.querySelector("a").setAttribute("target", "_blank");</script> at the bottom of the editor would work for this challenge, but other challenges using the preview will have the same issue if a user tries including a link other than the dead link # usually used.

I'm wondering if the script can be added to the preview itself somehow so it'll apply to each challenge using it, but I'm not sure which file(s) to look at for that.

[raisedadead]

@BKinahan Check this:
https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/client/commonFramework/update-preview.js#L117

Not 100% Sure though.

[tanveer12332]

CosineroLian
first you remove red-text class in h2 and add some style in ur style tag p{color:red;}

[breakpoint1025]

I also met this issue.
After I clicked the link on the right iphone Preview window, Run Test - Hangs until hard refresh the page.

[systimotic]

I just tested this on production and staging. I can't reproduce this on either. I assume this has been fixed. @raisedadead Can you confirm?

[raisedadead]

@systimotic nope its still there.

Here are the precise steps that I did:

1. Load the challenge, use the solution in the description above. Hit Run tests. They Pass.
2. Load the challenge again, use the solution in the description above, click the link cat photos in the iPhone preview. Hit Run tests. They hang.

Let me know if its not the same for you, and BTW welcome to the team, I never got a chance to welcome you earlier, apologies. 😃 !

[systimotic]

Thanks for the welcome, and the check!
I think we have found ourselves a very interesting situation here. I can reproduce this in Chrome, but not in Firefox. This might be one of the first times it's that way around! 😅
Both browsers complain about the CSP, but that doesn't seem to be the issue. Fun fact: if you change the link to use https, it actually tries to load the page inside the phone because the CSP allows it as the frame source. It doesn't actually load though, because https isn't enabled on freecatphotoapp.com.

These are the errors Chrome logs when I click the button after clicking the link. It seems like even though it doesn't actually change the iframe, it does mess something up. I can get Firefox to break in a similar way if I change to https, where it browses away from the normal source.
We should definitely look into some sort of link interception. Opening links in a new tab (as @BKinahan suggested) could definitely work.

[raisedadead]

Yeah, either that, or simply making any links in the iPhone preview as dead is also fine I think.